I am new to Ember, but I have extensive Angular experience.
I am trying to create a single page web application with ember.
My app will be pretty extensive and large, so I would like to separate the page into multiple views.
Every Ember demo and tutorial creates an application only using the index.html page.
In Angular, we have a view attribute (ng-view) and use includes with partials. (ng-include)
Does ember have an equivalent? If so, can you direct me to any documentation or demo that uses it?
PS - I know I can dynamically build an HTML file with GRUNT by taking smaller HTML files and concat/uglifying them together, but is that the best practice or does ember have a view and include system equivalent.
Related
I need to add new features to an already existing application. The application is built using Lithium and jQuery. The features that needs to be included have a complex view which allow users to analyze data and perform CRUD functionality. I won't go into details about the features here, but after working on a few simple Angular tutorials and side projects, I know that using AngularJS to create this view will make my life a lot more easier than creating the view using jQuery.
Over the course of the next few months we may convert the entire app to AngularJS.
I am uncertain about where I should place the Angular files and how to setup routing. How can I integrate AngularJS to Lithium so that part of the Lithium routing works and part of it is handled by AngularJS.
I also found this answer on stackoverflow but it doesn't mention folder structures or how to integrate Angular with Lithium. I think this link mentioned in the answers is supposed to have what I am looking for but it doesn't seem to exist anymore.
The link is down, but you can clone the source repository and run it yourself here: https://github.com/nateabele/li3-angular-presentation
Regarding organization, the simplest way would be to place the directory structure for your Angular components inside of /webroot. The more advanced (and in my opinion better) way would be to make them two separate applications: an AngularJS UI app, and a backend API in Li3 that it talks to.
What would be the best approach in creating a top navigation and footer for an Angular app that can be reused across multiple views? I'm thinking a directive is the way to go. What I'd like to accomplish would be the comparable to wp_header(); and wp_footer(); in wordpress.
The correct approach is SPA (Single Page Application) using ngView along with routings. The second less elegante option is to use ngInclude this can be used like a "template"/reusable section within the pages.
You can find really good examples here in Angular Documentation site:
http://docs.angularjs.org/api/ng/directive/ngInclude
First of all i am confuse for my project whether it can use angular.js or not, although i have started using it and i created some customization module with this but when i started applying it for all project i got stuck on many things.
My project is a order taking project and it has structure like this.
In the index page it has 3 panels.
left panle that draws all categories
middle panel that draws all category specific productes
and right panel that draws all the basket items with calculations.
On product click there also appears a model that draws all the customization.
I am using MVC-4.
Every thing on index that includes some layout is a partial view _leftpanl, _middlePnl, _rightPnl, _customziaion.
My concern is.
If i define the routes to the module i created how to fix on ng-view because per scope there will be one ng-view only. and my application load atleast 3 partial views to index page at the same time. So how would i fix on ng-view.
Just gimme some guide lines that i should follow to create this kind of application with angular.js.
Or it is not possible with angular because i think it is not a single page application.
Use the Angular-Breeze SPA template provided by the ASP.Net team http://www.asp.net/single-page-application/overview/templates/breezeangular-template
Don't mix up the Razor view/partials with Angular. Use ASP.Net MVC to manage only the REST interface and use AngularJS to embrace the presentation layer.
Learn the Angular Routing and Templates to mimic your requirements.
https://egghead.io/lessons/angularjs-routeprovider-api
https://egghead.io/lessons/angularjs-ng-view
It seems you have a problem to define what you really need.
AngularJS primary purpose is to do some Single Page Application. Which is, code only in HTML/CSS/JS in the front-end, and reuse your abilities in the back-end to produce DATA only (REST-json is the most classic but you can choose whatever you want).
So if you use a tool outside its primary purpose, you have to do some compromises : Of course you can mix backend template with AngularJS, but in this case, you can forget the router and ng-view.
Use AngularJS if you think you have some complex web interface. If it is only some static text, or even a few input forms here and there you don't necesseraly have to AngularJS, you can just use your classic server-side display rendering.
You could use ng-include to include each of your three partials into one view. Then in each partial view you can specify the controller with ng-controller. For creating the modal popup I would probably use ui bootstrap's modal
Alternatively you could use ui-router to create multiple parallel views.
I have following guidelines here which i hope will help you.
Do not mix Server Side MVC and Client Side MVC. AngularJS is primarly meant to augment the HTML and browser capability. The two-way binding of angularjs is excellent and provides lots of dynamic behavior. MVC4 scores best when we have to do lot of server side processing using the .Net platform capabilities.
But as you spent some good effort on this project and the corresponding technologies, there is a way out. Convert all your Controlller Actions in MVC4 to produce JsonResult and when the angularjs needs data use that, e.g. in $http.get( .
I want to create a site using assemble, yeoman, and angularJS.
The plan is that assemble will handle content and AngularJS will handle dynamic content via a REST API. Are the two compatible, is this a good choice of architecture? My concern is with the templating engine Assemble uses (HandleBars) and whether it is compatible with AngularJS as they both seem to use {{}}. I have only started investigating but am struggling to find examples of people using a similar architecture. How do i scaffold with Yeoman?
I'm doing something similar and to handle the issue with the template delimiters I use the angular interpolateProvider to change the delimiters for angular.
var app = angular.module('app', []).config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('{%');
$interpolateProvider.endSymbol('%}');
});
I'm not sure if you can configure Yeoman to automatically use the new delimiters when running some of the scaffolds, but I hope this helps separate your templates from the assemble templates.
I've done similar for a client for a retail site, to create a basis, custom CMS.
Originally I had the idea that all the items for sale (the data i.e model) would be represented via the data files - a mix of .json and yaml. (At least the client could edit the yaml file with some ease as it is sort of human readable).
A later improvement was to allow the client to edit the stock via a webpage - rather than editing the data files directly - Angular was ideal for this to have a webapp that basically allowed editing the data / upload and transform images, etc via a much nicer interface.
Assemble uses Handlebars (among others) to render templates, so you can use its syntax to escape Angular templates in a .hbs file, this way:
\{{ qty * cost | currency }}
I have individual pages and initially I wanted to use angularJS because of data binding and the many other neat features. I also ended up using requireJS simply to help me manage my dependancies better as the list of javascript libraries I'm using is growing.
My question is using AngularJS with requireJS a no no for non single page web apps?
It's not a no-no. You can definitely use angular on non-single page apps. You just will lose a lot of the functionality - ie the stuff between "pages". You app will essentially be recreated on every page.
I've used angular for a multi-page site (basically a product search engine), with each page being separate. I used GET and POST to transfer stuff across pages, but ultimately, I wanted to use angular for rendering the content on the page because it's just neat and clean.