Angularjs-2 (basic)

Angular Template

Angular template is very useful in Dynamic APP. They are written with HTML, contain angular specific elements and attributs, and can be added or dropped in the page. More specifically, Dynamic View = Template + Controller + Model

1. Template’s elements and attributs
   Directives, Markup:{{expressions}}, Filter, Form controls

2. Add templates into pages
   We need to use ng-include directive to fetch, comile and include an external HTML fragment
   Like: <div ng-include='menu.html'></div> or <ng-include src='menu.html'></ng-include>

Note: traditional web sites would contain multiple pages. When users make a request, the server will send the corresponding html page to the users. This is not efficient. So the single page applications are emerging. Instead of reponding a page, SPA only respond with JSON data, the single page will repond according to this JSON data or replace some templates to represent different views. (One challeng of SPA is that we should speed up the initial page load.)

Angular ngRoute and SPAs

1. SPA (single page application)
   Views = Templates + Controller + Model. Single page, single view, dynamic app

2. Deep linking: Hyperlink that specifices a link to a searchable or indexed piece of web content
   Example: http://…….//index.html #/menu/0 hash
   Any changes to the hash portion does not cause a page reload

3. The $location service
   Exposes the current URL in the browser address bar;
   Synchronizes the URL with the brower when user changes the address bar;
   Allows you to manipulate the hash portion of a URL;

4. Routing
   Mapping the path portion of a URL to a handler for that particular route
   Route is the hash portion of the URL in SPAs

5. ngRoute Module
   Installing the module: bower intall angular-route -S
   Manages the interaction between the $location service and the rendered view

6. $routeProvider
   Enables mapping from the routes to handlers, which are objects defining template URL and controoler

An example: routeProvider and routeParams

Moreover, we need ng-view that works together with route service to include the template to our main page

Angular UI-Router

Except ngRoute, UI-Router can be more powerful.

The detail introduction is as follow