Angular基础总结

一、使用Angular

1.引入`angualrjs`
2.定义`ng-app`告诉`angualrjs`那些代码要被`angualrjs`解析
3. `ng-model`  表示把`input`输入的值赋值给 `username`
4.`{{}}`  绑定数据

二、控制器

  • 1.通过ng-app定义myApp模块 告诉angularjs这里面的代码要被angularjs解析

  • 2.得通过angular.module('myApp',[]) 实现
    两个参数:

    • 1.模块名称
    • 2.依赖注入的让他模块

    4.定义控制器 view ng-controller
    5.定义控制器以后要实现这个控制器

1
2
3
4
5
app.controller('firstController',function($scope){

                 $scope.name='张三';

         })

$scope视图和控制器的桥梁，所有的数据都要绑定到$scope 所有的方法也要绑定到$scope

三、view和控制器的桥梁

1.$rootScope 全局作用域 可以数据和方法 （多个控制器共享数据）

2.$scope 局部作用域

四、$apply

AngularJS外部的控制器（DOM事件、外部的回调函数如jQuery 事件等）调用了AngularJS函数之后，必须调用$apply。
在这种情况下，你需要命令AngularJS刷新自已（模型、视图等），$apply就是用来做这件事情的。
angularjs外部的事件 或者方法 改变$scope绑定的数据的时候，改变不了，这时候就要用到$apply

五、内置定时器

  • 1.$timeout
  • 2.$interval

    六、数据

  • 1.数据绑定
    • ng-model='name',,可以将$scope的数据绑定到视图
  • 2.ng-reapet循环(track by $index出现相同值的时候需要绑定index)
  • 3.ng-bind-html，数据绑定 <element ng-bind-html="expression"></element>

  • 4.数字绑定ng-init,不常见建议用ng-bind

    1
    2
    3
    <div ng-app="" ng-init="quantity=1;cost=5">
    <p>总价： {{ quantity * cost }}</p>
    </div>

  • 5.ng-bind

    七、$watch

    $watch用于监听每个scope中的变量

  • 1.$watch单一的变量

    1
    2
    3
    4
    $scope.count=1;
    $scope.$watch('count',function(){
    ...
    });

  • 2.$watch多个变量用+号隔开

    1
    2
    3
    4
    5
    6
    //当count或page变化时，都会执行这个匿名函数
    $scope.count=1;
    $scope.page=1;
    $scope.$watch('count + page',function(){
    ...
    });

  • 3.$watch页可以监听数组或者对象

    1
    2
    3
    4
    5
    $scope.items=[
    {a:1},
    {a:2}
    {a:3}];
    $scope.$watch('items',function(){...},true);

八、$http请求

1.get请求(post同理)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var url="http://www.phonegap100.com/appapi.php";
            $http.get(url,{
                params:{
                    'a':'getPortalList',
                    'catid':20,
                    "x":'xxx'
                }
            }).then(function(res){



                console.log(res.data.result);

                $scope.list=res.data.result;



            },function(err){

                console.log(err);
            })

2.jsonp请求

1
2
3
4
5
6
7
8
var url='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=109&callback=JSON_CALLBACK'

           $http.jsonp(url).success(function(data){
               console.log(data);

           }).error(function(){

           })

3.jsonp1.6.2的版本

1
2
3
4
5
6
7
8
var url='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=109&callback=JSON_CALLBACK'

           $http.jsonp(url).success(function(data){
               console.log(data);

           }).error(function(){

           })

九、代码压缩的问题

第二个参数写数组可以完美解决

1
2
3
4
5
6
  app.controller('secondController',['$scope','$http',function($scope,$http){

        $scope.msg="你好angualrjs"

//        $http.get()
    }])

十、模块依赖ngSanitize.js（html代码解析模块）

1.引入 angular-sanitize.js
2.依赖注入ngSanitize
3.ng-bind-html 绑定数据

1
2
3
4
5
6
var app=angular.module('myApp',['ngSanitize']);

  app.controller('firstController',function($scope){
      $scope.title='<h2>这是一个标题</h2>'

  })

十一、angular的路由配置

1.引入js  angular-route.min.js
2.在html页面中定义  ng-view  显示我们模板里面动态加载的数据
3.var app=angular.module('myApp',['ngRoute']);   依赖注入
    //根据不同的路由加载不同的控制器和模板

    //加载出来的模板和控制回头放在视图里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
app.config(function($routeProvider){


       $routeProvider.when('/home',{


           templateUrl:"templates/home.html",
           controller:'homeController'

       }).when('/news',{


           templateUrl:"templates/news.html",
           controller:'newsController'
       }).when('/newscontent/:aid',{//动态路由

           templateUrl:"templates/newscontent.html",
           controller:'newsContentController'

       }).otherwise({  /*找不到路由的时候动态跳转的页面*/
           redirectTo:'/home'
       })

   })

5.注意：要实现路由里面定义的controller

十二、angular的广播

  • $scope $rootScope上面都可以绑定广播

  • $broadcast 给子controller 广播数据

  • $emit 给 父亲controller广播数据
  • $scope.$on 接收数据 ('名称',function(event,data){})
  • $scope.$broadcast('to-child', '给child数据'); //前面是名字 后面是数据 数据可以是 字符串 也可以是数组 和对象
  • $scope.$broadcast('to-parent', '给父亲元素广播数据')

    十三、angular的动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
      <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-animate.min.js"></script>

        <script>

            var m1 = angular.module('myApp',['ngAnimate']);
            m1.controller('firstController',['$scope',function($scope){
                $scope.bBtn = true;
            }]);

            m1.animation('.box',function(){
                return{
                    enter:function(element,done){
                        console.log(element);
                        console.log(done);
                        $(element).css({width:0,height:0});

    //                 /   $(element).animate({width:0,height:0});
                        $(element).animate({width:200,height:200},1000,done);

                    },
                    leave:function(element,done){
                        $(element).animate({width:0,height:0},1000,done);

                    }

                }

            });

        </script>
    </head>

    <body>
    <div ng-controller="firstController">
        <input type="checkbox" ng-model="bBtn">
        <div ng-if="bBtn" class="box"></div>
    </div>