zoukankan      html  css  js  c++  java
  • AngularJS1

    Ⅰ.AngularJS的点点滴滴--引导

     

    AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧

    ###页面引导实例化

    * * *

    ######1.自动实例化

    ```html

    <html>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

    <body ng-app="app">1+2={{1+2}}</body>

    <script>angular.module('app',[])</script>

    </html>

    ```

    >如果不写*app*这个值那么script的内容可以不写

    ######2.手动实例化(主要通过js来引导)

    ```html

    <html>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

    <body>1+2={{1+2}}</body>

    <script>

        angular.module('app',[])

          .conifg(function(){})

          .run(function(){alert('start');});

        angular.bootstrap(document, ['app']);

    </script>

    </html>

    ```

    >* 为什么声明一个模块后面有一个中括号?

    >* 因为angular是模块开发,声明一个模块必须要依赖另一个模块或者空模块,否则就声明失效啦

    >* config的方法可以配置模块,run是在模块执行前所执行的方法

    ###模块的依赖调用

    * * *

    ```javascript

    angular.module('route',[]);

    angular.module('app',['route']);

    ```

    >就是这么简单直接route模块的东西都可以被app模块所调用声明一个模块必须要依赖另一个模块或者空模块

    ###模块的控制器(*$scope*这个参数即为控制器的上下文)

    * * *

    ######1.调用模块的*controller*方法即可声明一个控制器而且返回当前模块所以可以用级联,

    ```html

    <html>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

    <body ng-controller="a">{{data}}</body>

    <script>

      angular.module('app.controller',[])

        .controller('a',['$scope',function($scope){

            $scope.data=1;

        }]);

      angular.module('app',['app.controller']);

      angular.bootstrap(document, ['app']);

    </script>

    </html>

    ```

    >* 为什么声明一个*$scope*这个变量?

    >* 因为当进行压缩js代码的时候变量名称改变,为了第一个参数为*$scope*这个变量而设计的,

    >* 所以可以写成

    ```javascript

    angular.module('app.controller',[])

      .controller('a',['$scope',function(c){  

        c.data=1;

      }]);

    ```


    ######2.直接声明一个全局方法


    ```javascript

    function a(a){c.data=1;}

    a.$inject = ['$scope'];

    angular.module('app',[]);

    angular.bootstrap(document, ['app']);

    ```

    >*controller*的*$inject*对象也是同上原因声明第一个参数为*$scope*,如果不压缩可以忽略

    ###数据绑定

    * * *

    >数据绑定是用了2个大括号,并且获取*controller*中的数据,如果使用指令则{{}}可以省略直接写属性

    * * *

    * 本文链接地址:[Ⅰ.AngularJS的点点滴滴--引导](http://www.cnblogs.com/cnlj/p/3436309.html)

     
     
     
  • 相关阅读:
    2019课设---基于微信小程序的食堂订餐送餐系统设计 【构思】(12)
    宝塔安装
    win10添加新建文本文档的快捷方式
    Vue底部菜单模块
    CSS渐变
    记录页面位置及进入页面时跳转位置
    PHP获取微信JS-SDK接口设置(access_token、jsapi_ticket、signature)
    添加Notepad++至右键菜单
    win10卸载XShell6报错1603
    win10我的电脑左侧快捷方式的控制
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3442472.html
Copyright © 2011-2022 走看看