Menu
I've built small apps in Angular and Ember and have enjoyed working with both-- the structure and functionality of using these frameworks have made coding up the UI a blast!
I was wondering whether there was a way to embed these apps into a pre-existing legacy site? For Angular, I know you can define a target div as your ng-app. Is there a better way of doing this? What about Ember? Are there any issues I need to look out for with regards to compatibility/integration?
I realize these frameworks are primarily meant for SPAs but like I said, I really like the opinionated nature and long-term maintainability benefits of using them.
I tried looking online but I haven't found resources regarding this topic (maybe for good reason). Any input would be appreciated.
794
Angular and Ember both can be difficult to learn while just starting, but when you compare both, Angular is easier to learn at the initial level whereas Ember gets easier as developers dig deep. But both the frameworks are amazing to work on when you have a good grip on them.
Ember-cli is a toolset to do all that things and ember build runs all needed tasks to build web-application. Some other frameworks may have their own toolset and if you don't use any framework, tools like gulp and webpack exist which are framework-agnostic and help to create your own build process.
Create a New Application Once you've installed Ember CLI via npm, you will have access to a new ember command in your terminal. You can use the ember new command to create a new application. This one command will create a new directory called ember-quickstart and set up a new Ember application inside of it.
Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It allows developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.
For ember, the proper way is to insert into an existing div. You can declare the div to insert into when defining your ember app as such:
App = Ember.Application.create({
rootElement: '#divName'
});
For AngularJS you only need to specify where you want the angular part of the code to be compiled. By adding:
<div ng-app='MyApplication'></div>
you include the app that you will then import at the end of the index.html file:
<script type='text/javascript' src='myApplication.js'></script>
Then in your application you can create your app and follow the AngularJS module structure from that point on.
var application = angular.module('myApplication', []);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With