1、什么是angularjs
- AngularJS是一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。
- AngularJS有着诸多特性，最为核心的是：MVC、模块化、双向数据绑定、指令系统、依赖注入等。
2、为什么使用angular
先看一个例子
<input type="text" ng-model = "name"> <p>{{name}}</p>
<script type="text/javascript"> var myapp = angular.module('myapp',[]); <script> src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" charset="utf-8"></script>
当页面加载完毕后，AngularJS自动开始执行
HTML页面中，ng-xxx的属性称之为指令(Driective)
ng-app 告诉AngularJS该标签是ng的应用程序管理的边界
ng-model 指令把文本框的值value绑定到user.name上
{{user.name}} 表达式用来取出绑定在user.name上面的值，显示在页面
（2）angular语法
- 定义一个应用
<html lang="en" ng-app = "myapp"> - 定义一个模块
var myapp = angular.module('myapp',[]);
第一个参数是控制器的名称,第二个参数是执行时会执行的函数
- 定义控制器
myapp.controller('myCtrl',["$scope",function($scope){ }])
为应用中的模型设置初始状态,通过$scope(上下文模型)对象把数据模型或函数行为暴露给视图
- 表达式
{{}}
它们可以包含文字、运算符和变量
如 {{ 1 + 2 }} 或 {{ ‘hello ’+ ‘,world’}}
指令
ng-xxx
ng-bind 来实现模型（Model）数据向视图模板（View）的绑定
ng-init 初始化模型（Model）也就是$scope。
ng-click、ng-dblclick 点击事件/双击
ng-show/hide控制元素是否显示，true显示、false不显示
ng-repeat 重复 可以将数组或对象数据迭代到视图模板中
ng-class控制类名
ng-switch、on、ng-switch-when 可以对数据进行筛选。
自定义指令
app.directive('xxx',function(){})
restrict 定义指令的声明方式 'E'元素 'A' 属性
replace 如果指令作为标签，替换标签本身
transclude 如果标签内部有内容，如何替换
template/ templateUrl 模板 / 模板的url
$templateCache 缓存模板
link 通过link可以给dom元素绑定事件
作用域
- 根作用域
整个应用范围（ng-app所在标签以内）都是可以被访问到的。
- 子作用域
通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。
`
<div class="d2" ng-controller = 'myCtrl2'>
<p>{{name}}</p>
<p>{{name1}}</p>
<p>{{age}}</p>
</div>
<script type="text/javascript">
var myapp = angular.module('myapp',[]);
myapp.controller('myCtrl',function($scope){
$scope.name = '张三';
})
myapp.controller('myCtrl2',function($scope){
$scope.name1 = 'ls';
$scope.age = 23;
})
</script>
`
过滤器
{{ | }}
| 来过滤
- 内置过滤器
1、currency将数值格式化为货币格式
2、date日期格式化，'yyyy-MM-dd hh:mm:ss'
3、filter 筛选 并返回一个新数组，其条件可以是一个字符串、对象、函数
4、json将Javascrip对象转成JSON字符串。
5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位
6、lowercase/uppercase将文本转换成小/大写格式
7、number数字格式化，可控制小位位数
8、orderBy对数组进行排序，第2个参数可控制方向 - 自定义过滤器
通过模块对象实例提供的filter方法自定义过滤器。
`
<p>{{'你好'| bf}}</p>
<script type="text/javascript">
var myapp = angular.module('myapp',[]);
myapp.controller('myCtrl',function($scope){
myapp.filter('bf',function(){
return function(input){
return 'bf==>'+input;
}
})
`
服务
- 内建服务
1、$location是对原生Javascript中location对象属性和方法的封装。
var myapp = angular.module('myapp',[]); myapp.controller('myCtrl',function($scope,$location){ $scope.absUrl = $location.absUrl(); $scope.protocol = $location.protocol(); $scope.port = $location.port(); $scope.path = $location.path(); $scope.hash = $location.hash(); $scope.search = $location.search(); })
2、$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
myapp.controller('myCtrl',function($scope,$timeout,$interval){ var timer = $timeout(function(){ $scope.now = new Date(); },1000) var timer2 = $interval(function(){ $scope.current = new Date() },1000) }
3、$log打印调试信息
4、$http用于向服务端发起异步请求。
var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 });
5、$filter在控制器中格式化数据。
myapp.controller('myCtrl',function($scope,$filter){ var dateFilter = $filter('date'); $scope.date = dateFilter(now,'yyyy-MM-dd hh:mm:ss'); } - 自定义服务
service方法
myapp.controller('myCtrl',['$scope','$filter','showTime',function($scope,$filter,showTime){ $scope.now = showTime; }]) myapp.service('showTime',['$filter',function($filter){ var date = new Date(); this.date = $filter('date')(date,'yyyy-MM-dd'); }])
factory方法
myapp.controller('myCtrl',['$scope','$filter','showTime',function($scope,$filter,showTime){ $scope.now = showTime; }]) myapp.factory('showTime',function($filter){ var date = new Date(); var dateFilter = $filter('date'); date = dateFilter(date,'yyyy/MM/dd'); return date; })
配置块
- 通过config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。
比如$http==>$httpProvider、$location==>$locationPorvider
运行块
- 可以直接运行相应的服务模块，AngularJS提供了run方法来实现。
路由
- 引入路由
<script src="lib/angular-route.js" charset="utf-8"></script> - 实例化模块时，依赖注入ngRoute
var app = angular.module('app',['ngRoute']); - 配置路由模块
app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/a',{ controller:'ACtrl', templateUrl:'a.html' }) .otherwise({ redirectTo:'/a' }); }]) - 布局模板
通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。
<div ng-view></div>
- 路由参数
两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，otherwise方法做为when方法的补充只需要一个参数。
第1个参数是一个字符串，代表当前URL中的hash值。
第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。
a、template 字符串形式的视图模板
b、templateUrl 引入外部视图模板
c、controller 视图模板所属的控制器
d、redirectTo跳转到其它路由
带参数的路由
获取参数，在控制中注入$routeParams可以获取传递的参数
网友评论