AngularJs基础
AngularJS
指令模块
ng-app:指令告诉AngularJS，<div>元素是AngularJS应用程序的“所有者”
ng-model指令把输入域的值绑定到应用程序变量name.
na-bind指令把应用程序name绑定到某个段落的Innerhtml。
ng-init:指令初始化AngularJS应用程序变量
example：
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
1.AngularJS表达式：{{expression}}
可以是{{5+5}}或者{{firstName+”“+”lastName}}；
2. AngularJS模块（Module）定义了AngularJS应用；
AngularJS模块（controller）用于控制AngularJS应用；
ng-app指令定义了应用；
ng-controller定义了控制器;
ng-repeat指令是用来重复一个HTML元素。
eg：
<body>
<div ng-app=”” ng-init=”name[{name:’john’,country:’Norway’},{name:’hega’,country:’Chain’},{name:’kai’,country:’American’}]“>
<ul>
<li ng-repeat=”x in name”>/*注意这个地方书写规范*/
{{x.name+’,’+x.country}}
</li>
</ul>
3. .directive函数是用来添加自定义的指令；如果需要调用自定义的指令；HTML元素上需要添加自定义的指令名；如下所示：
<body>
<scripy>
var app=angular.module(“myapp”,[]);
app.directive(“runoobDirective”,function(){
return{
restrict:”A”,
template:”<h1>自定义指令</h1>”
};
});
</script>
</body>
在上述表达式中使用的restrict值可以有如下几种：
|
E：只限元素名使用； |
|
A: 只限属性使用 |
|
C：只限类名使用 |
|
M：只限注释使用 |
注意：restrict默认值为SA，既可以通过元素名和属性名来调用指令；
模型模块
例子1：双向绑定
<body>
<div ng-app=”myApp” ng-controller=”myCtrl”>
名字：<input ng-model=”name”>
<h1>你输入了：{{name}}</h1>
</div>
<script>
var app=angular.module(‘myApp’,[]);
app.controller(‘myCtrl’,function($scripe){
$scope.name=”John Doe”;
});
</script>
</script>
例子2：输入验证
<body>
<form ng-app=”” name=”myForm”>
Email:
<input type=”email” name=”myAddress” ng-model=”text”>
<span ng-show =” myForm.myAddress.$error.email”>不是合法邮箱地址</span>
</form>
效果如下：
ng-model指令基于他们状态为HTML元素提供CSS类；
eg：<style>
input.ng-invalid{
background-color:lightblue;}</style>
<body>
<form ng-app=”” name=”myForm”>
请输入你的名字：
<input name=”myName” ng-model=”text required>
</form>
效果：
输入之前：
输入之后：
ng-model:指令根据表单域的状态添加/移出以下类：
|
ng-empty |
ng-not-empty |
|
ng-touched |
ng-untouched |
|
ng-valid |
ng-invalid |
|
ng-pending |
ng-pristing |
scope作用域
- 在使用AngularJS创建控制器时，可以讲$scope对象最为一个参数传递：
- AngularJS应用组成如下：
|
View（视图），即HTML； |
|
Model（模型），当前视图中可用的数据 |
|
Controller（控制器），即JavaScript函数，可以添加或者修改属性 |
- scope是JavaScript的对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
- 根作用域：所有的应用有一个$rootScope, 它可以作用整个应用中，因此也是各个controller中scope的桥梁，用rootscope定义的值，可以在各个Controller中使用：
例子：<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}/*根作用始终存在*/
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";/*注意他的定义方式*/
});
</script>
对于控制器，可以有方法（变量和函数）
<body>
<div ng-app=”myApp” ng-controller=”personCtrl”>
名：<input type=”text” ng-moddel=”firstname”>
< br>
姓：<input type=”text” ng-moddel=”lastname”>
<br>
姓名：{{fullname}}
</div>
<script>
var app=angular.module(‘myApp’,[]);
app.controller(‘personCtrl’,function($scope){
$scope.firstname=”john”;
$scope.lastname=”Doe”;
$scope.fullname=function(){
return $scope.firstname+” “+$lastname;
}/*此处为
});
