AngularJS学习笔记

2017-09-21 本文已影响18人 margery

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可以获取传递的参数