AngularJS - 视图

AngularJS视图 - 从简单和简单的步骤学习AngularJS，从基本到高级概念，包括概述，环境设置，MVC架构，第一个应用程序，指令，表达式，控制器，过滤器，表，HTML DOM，模块，表单，包含，Ajax ，视图，范围，服务，依赖注入，自定义指令，内部化，ToDo应用程序，记事本应用程序，Bootstrap应用程序，登录应用程序，上载文件，在线应用程序，导航菜单，切换菜单，订单表格，搜索选项卡，拖动应用程序，购物车申请，翻译申请，图表申请，地图申请，分享申请，天气申请，计时器申请，传单申请，Lastfm申请。

AngularJS通过单个页面上的多个视图支持单页面应用程序.为此，AngularJS提供了ng-view和ng-template指令以及$ routeProvider服务.

ng-view指令

ng- view指令只是创建一个占位符，可以根据配置放置相应的视图(HTML或ng-template视图).

用法

在主模块中使用ng-view定义div.

...

ng-template指令

ng-template指令用于使用脚本标记创建HTML视图.它包含 id 属性，$ routeProvider使用该属性将视图映射到控制器.

用法

定义一个主模块中类型为ng-template的脚本块.

   ...          Add Student 
      {{message}}

$ routeProvider服务

$ routeProvider是一项关键服务，用于设置URL的配置，使用相应的HTML页面或ng-template，并附加一个控制器.

用法1

定义类型为ng-template的脚本块在主模块中.

    ...            Add Student 
       {{message}}

用法2

使用主模块定义脚本块并设置路由配置.

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

以上几点非常重要，需要考虑上面的例子 :

$ routeProvider被定义为mainApp模块配置下的一个函数，使用key作为'$ routeProvider'.
$ routeProvider.when定义URL"/addStudent"，映射到"addStudent.htm". addStudent.htm应与主HTML页面位于同一路径中.如果未定义HTML页面，则需要使用ng-template和id ="addStudent.htm".我们使用了ng-template.
"否则"用于设置默认视图.
"controller"用于为视图设置相应的控制器.

示例

以下示例显示了所有上述指令的使用.

testAngularJS.htm

         Angular JS Views                                 AngularJS Sample Application
               Add Student
         View Students
                                        Add Student 
            {{message}}                                        View Students 
            {{message}}

输出

在网络浏览器中打开文件 testAngularJS.htm 并查看结果.