Angular js特性

2017-02-26 本文已影响45人 50153465fcd8

一、Angular四大特性之一---MVC

声明一个ng的应用程序 ng-App
```
 <html ng-app></html>
```
创建一个自定义的模块：angular.module("模块名",[依赖列表])
```
  angular.module.("模块名",["ng"])
```
在应用中注册自定义模块 ng-app="模块名"
```
 <html ng-app="myModule"></html>
```

在模块中声明Controller

   angular.module.("模块名",["ng"]).controller("myContro",function(){
   });

在view中指定Controller对象的作用范围-调用控制器创建函数
```
 <div ng-controller="myContro">
    {{name}}
 </div>
```

在Controller中声明Modal数据

  angular.module.("模块名",["ng"]).controller("myContro",function($scope){

      #$scope.name = "蓝科教育";

   });

注意：

Angular明明命名空间，&和&&为防止和你的代码的名称产生冲突 ng公共对象的前缀名使用$ 私有对象名使用$$ 请不要在你的对象中使用这两个符号
举例：

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
      </head>
      <body ng-app="myModule">
        <!--angular module controller model-->
        <div ng-controller="myControl">
          <ul>
            <li ng-repeat="name in personArray">{{name}}</li>
           </ul>
        </div>
    
</body>

<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      angular.module("myModule",["ng"]).controller("myControl",function($scope){
      $scope.personArray = ["张三","李四","王五","赵四"];
    </script>

</html>

二、AngularJS四大特性之二-双向数据绑定

1.方向1

Model绑定到View，此后不论何时只要Model发生改变，立即会自动同步更新
实现方法 {{}} ng-bind ngif ngRepeat...几乎所有的显示数据的指令都实现了方向1的绑定

举例：

  <!DOCTYPE html>
  <html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body ng-app="myModule">
    <div ng-controller="myControl" class="container">
        <p>{{name}}{{imgsrc}}</p>
        <button ng-click="add()" class="btn btn-danger">点我</button>
        <br />
        <span class="">点击次数{{count}}</span>
    </div>
    <div ng-controller="myControl2" class="container">
        <h1>轮播图</h1>
        ![](img/{{imgsrc+'.jpg'}})
        <button ng-click="prev()" class="btn btn-danger">上一张</button>
        <button ng-click="next()" class="btn btn-success">下一张</button>
    </div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var module = angular.module("myModule",["ng"])
    module.controller("myControl",function($scope){
        $scope.name ="gg";
        var count=0;
        $scope.count = count;
        $scope.add=function(){
            $scope.count++;
        }
    })
    module.controller("myControl2",function($scope){
        var imgsrc = 1;
        $scope.imgsrc=imgsrc;
        $scope.prev = function(){
            $scope.imgsrc--;
            if ($scope.imgsrc<1) {
                $scope.imgsrc=2;
            }
        }
        $scope.next = function(){
            $scope.imgsrc++;
            if ($scope.imgsrc>2) {
                $scope.imgsrc=1;
            }
        }
    })
</script>
</html>

2.方向2

view绑定到model,把视图中可以修改的HTML元素，即表单控件的值绑定到模型变量上。此后，只要用户修改了表单控件的值后，后台模型变量的值会立即随之改变
实现：只有ngmodel指令可以，为了监视到Model变量真的被改变了可以使用$scope.$watch()函数对Model数据的值进行监视,
```
$scope.$watch('name',function(newValue,oldValue, scope){

  console.log(newValue);

  console.log(oldValue);

});
```

单行文本输入域，ngModel可以把value属性值绑定到model
复选框，ngModely可以把true、false值绑定到Model变量
单选框 ngModel可以把当前选中的单选框的value值绑定到Model变量
下拉框 ngModel可以把当前选中的option的value值绑定到Model变量
举例：

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
  <body ng-app="myModule">
    <div class="container" ng-controller="myControl">
          <h1>单行文本输入框</h1>
          名字：<input type="text" ng-model="name"/>
          <span>{{name}}</span><br />
          密码：<input type="password" ng-model="password"/>
          <span>{{password}}</span>
          <br />
          <h2>复选框</h2><br />
          婚否：<input type="checkbox"  ng-model="marry"/><span>{{marry}}</span><br />
          <h2>单选框</h2><br />
          <input type="radio" value="男" ng-model="sex"/>男
          <input type="radio" value="女" ng-model="sex"/>女
          <span>{{sex}}</span><br />

          <h2>下拉框</h2>
          <select name="" ng-model="city">
              <option value="北京">北京</option>
              <option value="上海">上海</option>
              <option value="深圳">深圳</option>
              <option value="广州">广州</option>
          </select>
          <span>{{city}}</span>
          <br />

          <h2>简易版购物车计算器</h2>
          单价：<input type="text" ng-model="price" />
          数量：<input type="text" ng-model="number" />
          总价：{{price*number}}
      </div>
  </body>
  <script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    angular.module("myModule",["ng"]).controller("myControl",function  ($scope){
      $scope.$watch("name+password",function() {  //两个监听对象之间用+连接即可
          console.log($scope.name);
          console.log($scope.password);
      })
  })
  </script>
  </html>

三、ng模块中提供的Service组件

$rootScope 用于在所有控制前间共享数据的服务
$interval 周期性定时器服务
$timeout 一次性定时器服务

四、ng模块提供的directive组件

ngClick: 为元素绑定单机事件的监听函数-只能是Model函数($scope.函数名=function(){})，不能是全局函数,可以在view中被调用

ngMouseOver 鼠标移动到指定的 HTML 元素上时要执行的操作

ngSrc 为img标签指定src属性，但可以防止404请求错误

ngShow 若赋值为true，则display：block;否则display:none

ngHide; 跟ngshow相反

五、AngularJS四大特性之三-依赖注入

1.若某个函数调用时需要其他的对象作为形参，就称此函数依赖于形参

  function Driver(car) {
    car.strat();
    car.run();
    car.stop();
  }

2.如何解决依赖关系

1）主动创建

       var c1 = new Car();
       var d1 = new Driver(c1);

被动注入(Injection)方式

module.controller("控制器"，function($scope,$inerval));

angular中的ngController指令在实例化控制器对象时，会根据指令的形参名，创建出控制器所依赖的对象，并注入进来---依赖注入（Dependency Injection）

注意：
1.angular在创建控制器对象时，会根据形参列表中的每个形参依赖的对象的名称来创建，故控制器声明函数不能声明angular无法识别的形参名 angular只提供了一种依赖注入方式-根据形参名来注入依赖的对象
2.若项目js文件使用了类似yuicompressor等压缩程序，默认会把函数的形参名精简为一个字母的形式，会导致Angular的依赖注入失败-解决办法

   module.controller("控制器名"，[
    "$scope",
    "$interval",
    "$http",
    function(a,b,c){
  }
  ]);

3.可以被注入的对象 - 所有的service对象都可以被注入
1）$rootScope 在多个控制器间共享数据的服务
2）$interval 提供周期性定时器服务
3）$timeout 提供一次性定时器服务
4）$log 体用五个基本的日志输出服务
5）$http 提供异步HTPP请求（AJAX）的服务

  $http{method:"GET",url:""}.then(fun).catch(fun)

  $http.get("url").then(fn);

  $http.post("url",data).then(fn);

  6）$location

六、 ng模块中提供的过滤器

filter:把model中的数据在显示时以某种特定的格式来呈现
lowercase

语法：{{表达式 | lowercase}
uppercase

语法：{{表达式 | uppercase}
number

语法：{{表达式 | number}}
{{表达式 | number:小数位数}}
currency

{{表达式 | currency}}
{{表达式 | currency:'货币符号'}}
date

{{表达式 | date }}
{{表达式 | date | "yyyy-MM-dd"}}

七、总结ng模块中我们已经用到的内容

1.directive - 用在DOM元素上

   ngApp/ngbind/nginit/ngcontroller/ngmodel/

2.service - 用在控制器的声明里

    $scope/$rootScope/$timerout/$interval/$http/$location

3.filter - 把model中的数据在显示时以某种特定的格式来呈现

八、单页应用

angularjs提供的模块---ngroute

概念

route: 路由通过某条线路找到目标内容
ngroute 模块的目标：就是根据浏览器中url中的一个特殊的地址标记，查找到该标记所对应的模板页面，并异步加载到ngview

2.使用步骤

创建唯一完整的HTML页面，其中声明一个容器，ngview指令。引入angular.js angular-routejs

<div ng-view></div>

2）创建多个模板页面(习惯上放在一个特别的目录下，如tpl)

创建Module,声明依赖于ng/ng-route两个模板

var app = angular.module("module",["ng","ngRoute"]);

4）在Module中配置路由字典

  app.config(function($routeProvider){

    $routeProvider.when("/start",{
      templateUrl:xxx,
      controller:""     //此处声明的控制器可供当前目标页面所有元素使用   
    })
    })

5）使用浏览器做测试
http:IP地址/index.html#/路由地址

3.ngroute中的页面跳转

通过超链接访问 href="#/main"
通过js跳转 $location.path("/2")
举例：
html:

 <html>
  <head>
    <meta charset="utf-8">
    <title>路由</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
  <body ng-app="module">
    <ul>
        <li>
            <a href="#/">page1</a>
            <a href="#page2">page2</a>
        </li>
    </ul>
    <div ng-view></div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/singlePage.js" type="text/javascript" charset="utf-8"></script>
</html>

//singlePage.js文件内容

  var module = angular.module("module",["ng","ngRoute"]);

  module.config(function($routeProvider){

    $routeProvider.when("/",{
    
    templateUrl:"temp/page1.html",
    
    controller:"pageControl",
}).when("/page2",{
    
    templateUrl:"temp/page2.html",
})
})