02 ionic+angular开发webapp笔记

来源：互联网发布：mac软件下载安装编辑：程序博客网时间：2024/04/30 16:19

Angular js 的特性：

MVC

模块化和依赖注入

双向数据绑定

指令和ui控件

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

在angular中，模型是指scope中的变量，视图是html代码模板，控制器就是angular的controller。

<!doctype html><html lang="en" ng-app="mymodule"><head><meta charset="UTF-8" /><title>Document</title><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div><div ng-controller="firstController">此处显示的是双向数据绑定的名字：{{name}}<br>此处显示的根作用域里面的变量age：{{age}}<br>此处使用的ng-bind指定绑定的变量：<span ng-bind="name"></span><br>此处可以修改测试双向数据绑定：<input type="text" name="" id="" value="" ng-model="name" /><br></div><div ng-controller="secondController">{{name}}<br>{{age}}<br></div>这里是自定义的一个指令：<br>元素形式：<aaa></aaa>属性形式：<div aaa></div>类名字形式：<div class="aaa"></div>注释形式：<!-- directive: aaa --></div><script type="text/javascript">var mymodule = angular.module("mymodule",[]);mymodule.controller("firstController",["$scope","$rootScope",function(a,b){a.name="zhangsan";b.age = "666";}]);mymodule.controller("secondController",function($scope,$rootScope){$scope.name = "李四";});mymodule.directive("aaa",function(){return {restrict : "EACM",//E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用replace:true,//这个在注释使用的时候必须加上才管用template : "<h1>这是我自定义的指令</h1>"};});</script></body></html>

上面的这个例子中，元素标签中的ng开头的属性就是angular的指令，在input中输入内容，别的地方也绑定此变量的值也跟着变动，这就是angular的特色，双向绑定。ng-app一般页面中只会出现一个，用于划分angular操作dom的区域，也是$rootScope变量所能修改的区域，里面包含两个controller，两种引入的方式都正确，第一种是为了压缩代码所写的一种方式。但是，这种变量名字不能写错，否则angular找不到区域位置，无法处理。

angular将很多在特殊环境使用的内容都进行的模块化，就是在需要的时候可以引入，不需要的话就不引入，需要的使用用module方法依赖注入即可。

这是我初学angular的一些理解，如有问题或者错误的地方请指出，谢谢！！！

0 0