码迷,mamicode.com
首页 > Web开发 > 详细

angularJS 视图view

时间:2017-01-10 21:34:59      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:url   module   pre   log   nts   span   function   函数   ted   

AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务。

ng-view

开启视图,只是一个占位符,没有值  例:<div ng-view></div>

ng-template

创建视图,通过script标签,类型为ng-template,包含了一个$routeProvider映射控制的id属性,id指向一个html页面

$routeProvider

 

主要网址的配置,是一个angular对象,将他们映射相应的html页面或者ng-template

使用

 var app = angular.module("app", [‘ngRoute‘]);
      
  app.config([‘$routeProvider‘,
         function($routeProvider) {
            $routeProvider.
               when(‘/addStudent‘, {
                  templateUrl: ‘addStudent.html‘,
                  controller: ‘AddStudentController‘
               }).
               when(‘/viewStudents‘, {
                  templateUrl: ‘viewStudents.html‘,
                  controller: ‘ViewStudentsController‘
               }).
               otherwise({
                  redirectTo: ‘/addStudent‘
               });
         }]);

 

 通过config来配置,配置项为数组,回调函数的参数为$routeProvider,利用$routeProvider的when方法,参数1为请求路径,参数2为对象

包含了templateURL指向视图,controller为该视图的的控制器,otherwise 指向默认视图,如果页面不存在,渲染视图可以用template:(标签+内容)

 

 

 

 

 

 

angularJS 视图view

标签:url   module   pre   log   nts   span   function   函数   ted   

原文地址:http://www.cnblogs.com/dyc-yoko/p/6270631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!