AngularJS入门基础
入门
1.
AngularJS是一个JavaScript框架，可通过<script>标签添加到HTML页面
AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML
2.
核心概念之一 -------MVC模型
Model 表示应用程序核心（比如数据库记录列表）
View 显示数据（数据库记录）
Controller 处理输入（写入数据库记录）
表达式
AngularJS使用表达式把数据绑定到HTML
AngularJS表达式写在双大括号内：{{表达式}}
AngularJS可以包含文字，运算符和变量 {{5+5}}
AngularJS指令
1.ng-app:
ng-app指令用于告诉AngularJS应用当前这个元素是根元素
所有AngularJS应用都必须要一个根元素，一个HTML中只声明一个ngApp指令，即一般用于<html>或<body>
严格模式：data-ng-app=""
表达式一般放在标签内部和标签的属性里：<div class="my{{3+2}}">ABC</div>
可以使用 +，- , * , / , % 等
<p>{{3>1}}</p>
<p>{{10>3?'正确'：'错误'}}
2.ng-init:
用于声明模型数据（变量）------initialize，初始（数值，字符串，对象，数组）
使用此指令声明的模型数据可以在整个ng-app范围内使用
补充：声明模型数据，有两种方法
1）使用ng-init指令： 不推荐使用
2）使用ng-controller 和 JS声明：推荐使用
3.ng-bind:
AngularJS使用给定的变量或表达式的值来替换HTML元素的内容
如果给定的变量的或表达式修改了，指定替换的HTML元素也会改变
<div>{{1+2}}</div>
<div ng-bind="1+2"></div>
4.ng-repeat:
用于循环输出指定次数的HTML元素
集合必须是数组或对象
循环体内可使用$index变量，值就是当前元素的下标
<div ng-init="array=[1,2,3];"></div>
<div ng-repeat="a in array">{{a}}</div>
5.ng-model:
ng-model指令可以将输入域的值与AngularJS创建的变量绑定
<div ng-init="sum=30;price=10;number=3"></div>
<input type="text”ng-model="sum"/>
通过改变input的值可以改变sum的值
6.ng-style：
指令为HTML元素添加style属性
ng-style属性值必须是对象，表达式返回的也是对象
对象由css属性和值注册，即key=>value对（键值对）
<html ng-app="myapp">
<body ng-controller="myctrl">或<div( ng-controller="myctrl")></div><h1 ng-style="mystyle">hello</h1></body>
<script>angular.module("myapp",[]).controller("myctrl",function($scope){$scope.mystyle={ 键值对 }});</script>
7.ng-src:
指令覆盖了<img>元素的src属性
使用了AngularJS代码设置图片地址，请使用ng-src指令替代src属性
ng-src指令确保的AngularJS代码执行前不显示图片
<html ng-app="myapp">
<body ng-controller="myctrl">或<div( ng-controller="myctrl")></div>< h1 ng-style="mystyle">hello</h1></body>
<script>angular.module("myapp",[]).controller("myctrl",function($scope){$scope.img="图片路径"});</script>
8.AngularJS Scope（作用域）
Scope是应用在HTML （视图）和JavaScript（控制器）之间的纽带
Scope是一个对象，有可用的方法和属性
Scope可应用在视图和控制器上，Scope是模型（Model）
问题：区别根作用域？
所有的应用都有一个$rootScope,可以作用在ng-app指令包含的所有HTML元素中
$rootScope可作用于整个应用中，是各个controller中scope的桥梁，用rootscope定义的值，可以在各个controller中使用
步骤：
1）通过AngularJS的angular.module函数来创建模块
2）使用ng-controller指令来添加应用的控制器
3）设置模型数据
html:<div ng-controller="mycontroll">...</dilv>
JS:
var app=angular.module('模块名'，[]);//创建应用程序模块
app.controller('控制器名'，function($scope){
$scope.模型变量名1 = 值1;//设置模型数据
$scope.模型变量名2 = 值2;//设置模型数据
});
AngularJS过滤器
过滤器可以通过一个管道字符(|) 和 一个过滤器添加到表达中
currency ：格式化数字为货币格式
filter：从数组项中选择一个子集
lowercase : 格式化字符串为小写
orderBy : 根据某个表达式排列数组
uppercase : 格式化字符串为大写
AngularJS服务（Service）
AngularJS中你可以创建自己的服务，或使用内建服务
在AngularJS中，服务是一个函数或对象，可在你的AngularJS应用中使用
AngularJS内建了30多个服务
1）$location服务，它可以返回当前页面的URL地址
2）$http是AngularJS应用中最常用的服务，服务向服务器发送请求，应用响应服务器传送过来的数据
3）$timeout服务对应了JS window.setTimeout函数
4）$interval服务对应了JS window.setInterval函数
5）当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它
absUrl( ):只读;根据在RFC中指定的规则，返回url,带有所有的片段
<script>
var app = angular.module('myapp',[]);
app.controller('myctrl',function($scope,$location,$timeout){
$scope.myUrl = $location.absUrl();
$timeout(function(){
$scope.change = 'hello';},2000);
});
</script>
AngularJS Http
$http 是 AngularJS中的一个核心服务，用于读取远程服务器的数据
$http.get(url) 是用于读取服务器数据的函数
angular.module('myapp',[]).controller('myctrl',function($scope,$http){
$scope.newList=null;
console.log('页面加载完成，开发发起异步请求，获取服务器端数据...');
$http({methed:'GET',url:'data/list.json'}).success(function(data){
$scope.newList=data;
});
});
AngularJS HTML DOM
AngularJS为HTMLDOM元素的属性提供了绑定应用数据的指令
1）ng-disabled指令直接绑定应用程序数据到HTML的disabled属性
2）ng-show指令隐藏或显示一个HTML元素
3）ng-hide指令用于隐藏或显示HTML元素
<button ng-disabled="myswitch">点我</button>
<input type="checkbox" ng-model="myswitch"/>按钮
AngularJS双向数据绑定
方向一：
model绑定到view，只要model数据改变，view中也会改变-使用{{}}或ng-bind指令可以实现
此方向的绑定-可以用$interval()验证
方向二：
view输入绑定到model，只要view中的输入改变，model也会改变-使用ng-model指令实现此方向的绑定-可以用$scope.$watch()验证
补充：服务（Service）
1)AngularJS $interval服务对应了JS window.setInterval函数
2)AngullarJS $timeout服务对应了JS window.setTimeout函数
<div ng-controller="myctrl">
<div>计数器：{{count}}</div>//view跟着model改变
<input type="text" ng-model="age" /> //model跟着view的改变
</div>
var app=angular.module('myapp',[]);
app.controller('myctrl',function($scope,$interval){
$scope.count=10;//model数据
$interval(function(){$scope.count++;},1000);
$scope.age=1;
$scope.$watch('age',function(){console.log($scope.age);})
})
AngularJS Bootstrap
可以在AngularJS应用中加入Bootstrap（ng-bind不能显示）引入bootstrap.css
AngularJS包含
使用AngularJS，你可以使用ng-include指令来包含HTML内容
<div ng-include="名字"></div>
$scope.名字="名字.html";
AngularJS路由
AngularJS路由允许我们通过不同的url访问不同的内容
通常的url形式为：http://runoob.com/first/page,但在单页Web应用中AngularJS通过# + 标记实现
在路由中，提供了两个依赖性服务：$location,$routeParams;均可在controller中使用o
1）$location:进行路由跳转
$location.path('/second');//$window.location.href='';
2）$routeParams:获取路由时所传参数
如何使用ngRoute模块：
1）载入了实现路由的js文件：angular-route.js
2）包含了ngRoute模块作为主应用模块的依赖模块 angular.module('myapp',['ng','ngRoute'])
3）使用ngView指令，来回切换的"伪页面"，必须盛放在一个ngView指令中<div ng-view></div>
4）配置$routeProvider,用来定义路由规则
$routeProvider为我们提供了when(path,object)&otherwise(object)函数按顺序定义所有路由
<a href='#/ab'>Detail</div>
<a href='#/hm'>Home</div>
.config(function($routeProvider){
$routeProvider
.when('/ab',{
templateUrl : 'avrbos.html',controller:'abCtrl'
}).otherwise({redirectTo:'/hm'}) //其它的请求地址一律映射到/hm路径
})
参数说明：
template：在ng-view中插入简单的HTML内容.when('/computers'，{template:'这是电脑分类页面'})
templateUrl:在ng-view中插入HTML模板文件$routeProvider.when('/computers',{templateUrl:'views/computers.html'});
controller:function.string或数组类型，在当前模板上执行的controller函数，生成新的scope
controllerAs:string类型，为controller指定别名
redirectTo:重定向的地址
resolve：指定当前的controller所依赖的其他模块
浙公网安备 33010602011771号