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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
JS常用函数使用指南
Nov 23 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
jQuery常用选择器详解
Jul 17 jQuery
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 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
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
node.js超时timeout详解
2014/11/26 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python多线程使用方法实例详解
2019/12/30 Python
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
中文系师范生自荐信
2013/10/01 职场文书
医学生自荐信
2013/12/03 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
工程质量承诺书
2014/03/27 职场文书
协议书与合同的区别
2014/04/18 职场文书
长征观后感
2015/06/09 职场文书
离职信范文
2015/06/23 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技