AngularJS 视图详解及示例代码


Posted in Javascript onAugust 17, 2016

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 视图详解及示例代码

以上就是对AngularJS 视图资料的整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
精通JavaScript的this关键字
May 28 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
JS中一些高效的魔法运算符总结
May 06 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 #Javascript
AngularJS Ajax详解及示例代码
Aug 17 #Javascript
AngularJS包括详解及示例代码
Aug 17 #Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 #Javascript
AngularJS表单详解及示例代码
Aug 17 #Javascript
AngularJS模块详解及示例代码
Aug 17 #Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 #Javascript
You might like
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
python修改注册表终止360进程实例
2014/10/13 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
详解python变量与数据类型
2020/08/25 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
计算机个人求职信范例
2014/01/24 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
javascript对象3个属性特征
2021/11/17 Javascript
MySQL RC事务隔离的实现
2022/03/31 MySQL
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技