ng-view
ng-view 标记只是简单地创建一个占位符,是一个相应的视图(html或ng-template视图),可以根据配置来放置。
使用
定义一个div与ng-view在主模块中。
...
ng-template
ng-template 指令是用来创建使用script标签的html视图。它包含一个用于由$routeprovider映射控制器视图“id”属性。
使用
定义类型作为主模块中 ng-template 的脚本块。
...
$routeprovider
$routeprovider是组网址的配置,将它们映射相应的html页面或 ng-template,并附加一个控制器使用相同键的服务。
使用
定义类型作为主模块中 ng-template 的脚本块。
...
使用
定义主模块的脚本块,并设置路由配置。
var mainapp = angular.module(mainapp, ['ngroute']); mainapp.config(['$routeprovider', function($routeprovider) { $routeprovider. when('/addstudent', { templateurl: 'addstudent.html', controller: 'addstudentcontroller' }). when('/viewstudents', { templateurl: 'viewstudents.html', controller: 'viewstudentscontroller' }). otherwise({ redirectto: '/addstudent' }); }]);
以下是在上面的例子中需要考虑的重要问题
$routeprovider被定义为使用关键字作为'$routeprovider“下mainapp模块的配置功能; $routeprovider当定义了url“/addstudent”映射到“addstudent.html”。 addstudent.html应存在于相同的路径主要的html 页面。如果htm页面没有定义,那么ng-template被id=“addstudent.html”使用。我们已经使用了ng-template; “otherwise”是用来设置的默认视图; “conlloer”是用来设置该视图对应的控制器;例子
下面的例子将展示上述所有指令。
testangularjs.html
angular js views angularjs sample application add student
view students
结果
在web浏览器中打开textangularjs.html。看到结果如下:
