前端框架 angularjs
Angularjs
简介:angularjs是一个JS框架。正如JQ一样，需要通过＜ｓｃｒｉｐｔ＞引入．通过指令扩展HTM。
通过指令开启angularjs。Ng-app是angularjs的入口。所有应用程序启动angularjs的入口。ng-app相当于main的入口，即ng-app地下的所有归angularjs管。每个页面只能允许使用一次。
Ng-model是绑定值，是是双向绑定ng-model 指令绑定输入域到控制器的属性。Ng-init是初始化指令。
Ng-blid和{{}}是表达式。angularjs中的取值表达式{{}}与ng-blid的区别。两者效果是一样的，区别在于：使用花括号时，angularjs使用的是数据取代模板中的花括号时。第一个加载的是页面，即一般的index.htm.。其中未被渲染的部分可能会被用户看到，影响美感和用户体验。第二种则是不会出现这种情况。原因：浏览器一般先加载的是页面，即index,hmt.后面是渲染页面，再进行angularjs的解析。故对于index页面建议使用ng-blid。即首页使用ng-blid.其他的页面可使用{{}}进行数据绑定。
Example1:
Html code:
<html ng-app=”emModule”>
<head>
<script src=’angular.js’></script>
</head>
<body>
<input type=”text” ng-model=”name” > 指定值用于数据绑定。
<p ng-init=”name”=”Tom” ></p> 初始化，一般不常用。
<p>{{name }}</p>
<p ng-blid=”name”> </p> 两者的显示效果一样。
</body>
通过angular.module定义模块。指定ng-app的名称及依赖。a.Ng-controller定义控制器。
Ng-repeat重复循环指令，可用于遍历。
Example2:
Html code:
<html ng-app=”emModule”>
<head>
<script src=’angular.js’></script>
</head>
<body>
<div ng-controller=”myController”>
<input type=”text” ng-model=”name”>
姓名：{{ name }}
姓名：{{u.name}}
姓：
<li ng-repeat=＂x in us＂>
{{x.name+ ‘,’ + x.sex}}\
</li>
</div>
<script>
Var app=angular.module(‘emModule’,[]);
App.controller(‘myController’, function($scope){
$scope.name=”Tom”;
对象形式
$scope.us={ Name: “Tow”, Sex: “man”};
数组形式
$scope.us=［
{ Name: “Tow”, Sex: “man”}，
{ Name: “Too”, Sex: “man”}
];
});
</script>
</body>
可通过自定义创建指令：.directive
Example1:
Html code:
<html ng-app=”emModule”>
<head>
<script src=’angular.js’></script>
</head>
<body>
<div ng-controller=”myController”>
<hello> world! </hello>
</div>
<script>
Var app=angular.module(‘emModule’,[]);
App.directive(“hello”,function(){
Return {
Template: “<h1>Hello </h1>”, 表示模板
Restrict: “AECM” 设置指令的调用方式。A表示通过属性<div hello></div>，E是表示元素名<hello></hello>，C表示类<div class=”hello”></div>，M表示注解<!--指令：hello －－> 。最长用的是AE两种。默认为AE。
};
})
</script>
</body>
Ng-class指令：用于动态自定义dom元素的css类。
一般有三种方法：
1.scope变量绑定，不推荐用。
2.对象key/value处理
<!DOCTYPE html>
<html lang="en" ng-app="ColorModule">
<head>
<meta charset="UTF-8">
<title>变色</title>
<style type="text/css">
.red{}
.green{background-color: blue}
</style>
<script src="angular-1.3.0.js"></script>
<script src="color.js"></script>
</head>
<body>
<div ng-controller="colorController">
（当isred为真时，增加red样式；isgreen为真时，增加green样式）
<p ng-class='{red:isred,green:isgreen}'>选择的颜色是{{message}}</p>
<button ng-click="setcolorr()">红色</button>
<button ng-click="setcolorg()">蓝色</button>
</div>
</body>
</html>
var colorm=angular.module("ColorModule",[]);
colorm.controller('colorController', ['$scope',
function($scope){
$scope.isred=true;
$scope.isgreen=false;
//上述是开始的样式
$scope.setcolorr=function(){
$scope.isred=true;
$scope.isgreen=false;
$scope.message="this is red";
}
$scope.setcolorg=function(){
$scope.isred=false;
$scope.isgreen=true;
$scope.message="this is blue";
}
}])
3.数组字符串形式
<div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>
function ctrl($scope) {
$scope.isActive = true;
}
其结果可能会是2种情况， isActive 表达式为 true 则会给 <div></div> 附加 active 样式，否则会附加 inactive 样式。
Ng-model的指令模型
1：将输入域的值与angularjs创建的变量绑定。
Em：<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
2：数据的双向绑定，在修改输入值时，angularjs的值也跟随之改变。
Em：<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
3：验证用户的输入。
4：可以为应用数据提供状态值。（invalid如果输入的值是合法的则为 tru，dirty如果值改变则为 true，touched如果通过触屏点击则为 true,error）
5:基于状态为HL提供CSS类。
Em:
<style>
input.ng-invalid {
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
事件ng-show，ng-hide.,ng-toggle,ng-click：
当为true时，显示，否则不显示。Ng-hide同样道理。Ng-toggle是相互转换
<div ng-controller='DeathrayMenuController'>
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState.show'> 这一大块地显示。处于ng-show节点下的元素。
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
<div/>
myCSSModule.controller('DeathrayMenuController', ['$scope',
function($scope) {
$scope.menuState={show:false};
$scope.menuState.show=false};
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show; 相互转换的语句
};
}
])
Scope（作用域）contorller(控制器)
它是应用的HM和js之间的纽带。可应用在视图图和控制器上。
rootScope可作用于整个应用。用rootscope定义的值可用于各个控制器。
EExample3:
Html code:
<html ng-app=”emModule”>
<head>
<script src=’angular.js’></script>
</head>
<body>
<div ng-controller=”myController”>
<input type=”text” ng-blid=”name”>
{{lname}}
{{fullname}}
</div>
<script>
Var app=angular.module(‘emModule’,[]);
App.controller(‘myController’, function($scope,$rootScope){
$scope.name=”Tom”;
$rootscope.lname=”Jiee”;
$scope.fullname = function() {
return $scope.name + " " + $scope.lname;
}
</script>
</body>
</html>
Filter过滤器。
使用 | 管道字符添加到表达式和指令中。
{{ lastName | uppercase }}
多个过滤器时：
{{ x.name | uppercase |filter:test |orderby:’name’}}
表单认证：
在客户端的验证不能用户输入数据的安全，所以服务端也必须验证。