Ui-router (iii) Controller and template

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.