简介AngularJS的视图功能应用


Posted in Javascript onJune 17, 2015

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

ng-view 标记只是简单地创建一个占位符,是一个相应的视图(HTML或ng-template视图),可以根据配置来放置。
使用

定义一个div与ng-view在主模块中。

<div ng-app="mainApp">
...
  <div ng-view></div>

</div>

ng-template

ng-template 指令是用来创建使用script标签的HTML视图。它包含一个用于由$routeProvider映射控制器视图“id”属性。
使用

定义类型作为主模块中 ng-template 的脚本块。

<div ng-app="mainApp">
...
  <script type="text/ng-template" id="addStudent.html">
   <h2> Add Student </h2>
     {{message}}
  </script>

</div>

$routeProvider

$routeProvider是组网址的配置,将它们映射相应的HTML页面或 ng-template,并附加一个控制器使用相同键的服务。
使用

定义类型作为主模块中 ng-template 的脚本块。

<div ng-app="mainApp">
...
  <script type="text/ng-template" id="addStudent.html">
   <h2> Add Student </h2>
     {{message}}
  </script>

</div>

 

使用

定义主模块的脚本块,并设置路由配置。

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

<html>
<head>
  <title>Angular JS Views</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp">
   <p><a href="#addStudent">Add Student</a></p>
   <p><a href="#viewStudents">View Students</a></p>
   <div ng-view></div>
   <script type="text/ng-template" id="addStudent.html">
     <h2> Add Student </h2>
     {{message}}
   </script>
   <script type="text/ng-template" id="viewStudents.html">
     <h2> View Students </h2>   
     {{message}}
   </script> 
  </div>

  <script>
   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'
        });
     }]);

     mainApp.controller('AddStudentController', function($scope) {
      $scope.message = "This page will be used to display add student form";
     });

     mainApp.controller('ViewStudentsController', function($scope) {
      $scope.message = "This page will be used to display all the students";
     });
  </script>
</body>
</html>

结果

在Web浏览器中打开textAngularJS.html。看到结果如下:

简介AngularJS的视图功能应用

Javascript 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
在AngularJS中使用AJAX的方法
Jun 17 #Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 #Javascript
AngularJS的表单使用详解
Jun 17 #Javascript
举例讲解AngularJS中的模块
Jun 17 #Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 #Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 #Javascript
JavaScript AOP编程实例
Jun 16 #Javascript
You might like
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP 快速排序算法详解
2014/11/10 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python八皇后问题的解决方法
2018/09/27 Python
Django 路由控制的实现代码
2018/11/08 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
初中地理教学反思
2014/01/11 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
毕业自我评价
2014/02/05 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
青年教师个人总结
2015/02/11 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书