Ui-router (iii) Controller and template

This is on the basis of the previous, the client angular.js responsible parts of the whole string together to demonstrate.

We prepare the premises according to the order of angular execution:

(1) The Client root directory index.html first load angular.js and ui-router.js files

<script src= "Http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js" ></script><script src= ". Vender/angular-ui-router-0.2.13.js "></script>

(2) Citation App.js

<script src= "/app.js" ></script>

This file is a file generated by the Gulpfile.js configuration task that contains the router configuration used by the Angular.js, controller script, services, components, filters, and initialization of the config configuration.

(3) Specify Angular.js part and view fill section

(4) Create a main.js init registration script under the scripts root directory.
Angular.module (' Yijiebuyi ', [' Ui.router ']). config ([' $locationProvider ', ' $urlRouterProvider ', function ($ Locationprovider, $urlRouterProvider) {$urlRouterProvider. Otherwise ("/blog");}]);
The previous article has already said that the module below several important API, config for the common function service and the common module initialization registration played a very important role. Because we need to use the Ui.router module to parse the route from beginning to end, register here.
As we said in the previous it, angular.js the default route navigation still requires the Ng-route module, so we specify a boot default route to Ng-route in Main.js with Urlrouterprovider module/blog service
Is the function of this sentence $urlRouterProvider. Otherwise ("/blog");
(5) Custom Routing
Routes root directory We create a blog.js script file
Angular.module (' Yijiebuyi '). config ([' $stateProvider ', function ($stateProvider) {$stateProvider. State (' blog ', {URL : '/blog ', views:{' container ': {templateurl: ' Templates/blog_layout.html '}}}. State (' Blog.deta    Il ', {url: '/:blogid ', views:{' container ': {templateurl: ' templates/blog_detail.html '}} });}]);
Above we relied on injecting $stateProvider service and then customizing 2 Routes/blog Blog home page and/blog/1234 blog Detail page
(6) Templates Create a template view
Header.html
Footer.html
This is the header and footer view because there are lots of places to share, so make 2 partial views alone
Blog.layout.html
This is the homepage of the blog, you can also understand the master page
<div ng-controller= "Bloglayoutctrl" > <span>{{title}}</span> <div ng-include= "' templates/ Header.html ' ">header</div> <div ui-view=" container "> </div> <div ng-include=" ' templates/ Footer.html ' ">footer</div></div>
You can see that this master page is loaded into the generic page header and footer template via Ng-include.
He has a controller of his own ng-controller= "Bloglayoutctrl"
It can handle some logical control of the master page.
Below is a view container <div ui-view= "container" ></div> which can load nested views
Blog_detail.html
This is the blog details page
This view is only nested in the Blog_layout.html master page, so this view only needs to focus on the logic you need to
<div ng-controller= "Blogdetailctrl" ui-view= "container" > {{title}} </div>
He corresponds to the controller Blogdetailctrl
(7) We need to create the above 2 controllers in the Controllers root directory
Master Page
Bloglayoutctrl.js
Angular.module (' Yijiebuyi '). Controller (' Bloglayoutctrl ', [' $scope ', ' $state ', function ($scope, $state) {$scope.    Title= ' A commoner-blog common template '; }]);
Blog Details page
Blogdetailctrl.js
Angular.module (' Yijiebuyi '). Controller (' Blogdetailctrl ', [' $scope ', ' $state ', function ($scope, $state) {$scope.    Title= ' A commoner-blog details page '; }]);
All of our controllers have defined a Title property for $scope object.
Launch the App
[Email protected]:~/code/work$ Gulp
Navigate to/blog master view by default,
Modify URL to/blog/234234 navigate to blog Detail Page view
Ui-router (iii) Controller and template