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>
angular将很多在特殊环境使用的内容都进行的模块化,就是在需要的时候可以引入,不需要的话就不引入,需要的使用用module方法依赖注入即可。
这是我初学angular的一些理解,如有问题或者错误的地方请指出,谢谢!!!