AngularJS

最新推荐文章于 2024-04-26 15:01:42 发布

aspnet程序猿

最新推荐文章于 2024-04-26 15:01:42 发布

阅读量207

点赞数

分类专栏：前端开发文章标签： Angular

本文链接：https://blog.csdn.net/u014246936/article/details/80571500

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

==================================================
AngularJS四个核心思想：
依赖注入
模块化
双向绑定
语义化标签

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) { // $http就是依赖注入,自定义服务也可以注入,只要把自定义的服务名写到参数里就可以使用,ioc容易会自动注入.

});
$scope就是双向数据绑定中的model.
angular模块构成：Controller,Directive,Filter和自定义服务。
自定义服务有：Provider、Factory、Service、Const、Value、Config、Run。
"ng-"叫做指令.
=================================================
优点：不用像Jquery那样频繁操作dom.

ng-model:
<input ng-nodel="a"/>+<input ng-nodel="b"/>=<span>{{a+b}}</span>
a或b的值发生改变,a+b会自动改变。
ng-model='user.Name' : 这样也可以.

开发工具：Sublime、WebStorm
WebStorm强大的代码提示：Setting->Plugins->选中AngularJS.然在页面<script src 引入AngularJS,之后写html标签的时候会自动提示标签的属性，例如：ng就会提示ng-model等.

mvc

ng-app : 限定作用域
ng-controller : 限定作用域
ng-model
{{}}或ng-bind : <h1>{{msg}}</h1> 或 <h1 ng-bind='msg'></h1>
<div class='{{className}}'></div>
使用{{}}的缺点:当页面正在加载的时候，页面上显示的就是双大括号，这样不好，所以使用ng-bind较好,
如果使用{{}},那么加上ng-clock class='ng-clock'也不会显示双大括号,例如:
<h1 ng-clock class='ng-clock'>{{msg}}</h1>

<body ng-app='app'>
<div ng-controller='MyCtrl'>
<input type='text' ng-model='msg'/>
<h1>{{msg}}</h1>
<h1>{{test()}}</h1>
<div ng-click='test2()'>test2</div>
</div>
</body>
angular.module('app',[]) //'app'与ng-app指定的值对应,第二个参数为model,没有设置为[]
.controller("MyCtrl",function($scope){//与ng-controller指定的值对应
    $scope.msg='hellow word!', //$scope就是mvc中的model
    $scope.test=function(){
       return $scope.msg+'_test';
    },
    $scope.test2=function(){
       $scope.msg='test2';
    },
})
.controller(........)
.controller(........);

//ng-model='msg'这个标输入框的值发生变化,{{msg}}和$scope.msg的值与会发生变化,$scope.msg发生变化,输入
框的值和{{msg}}也会发生变化.

{{}}中可以写任何表达式，例如：{{2+3}}、{{'a'+'b'}}

ng-hide="表达式",表达式为真则显示，否则隐藏
ng-if:"表达式",表达式为真则显示，否则移除这个元素.
ng-show:跟ng-hide类似.例如：<span ng-show='msg.length>0'></span>

angular.module('app',[])
.value('realName','张三')
.value('realName','李四') //realName变成了李四,.value是可以改变的
.constant('url','http://www.baidu.com') //.constant是不可改变的
.factory('data',function(){//可以执行任意操作
    return {message:'你好',setMsg:function(){this.message='不好'}};
})
.service('user',function(){
   this.firstName='上官';
   this.lastName='飞燕';
   this.getFullName=function(){
     return this.firstName+this.lastName;
   }
})
.controller('MyCtrl',function($scope,realName,url,data,user){
   //realName、url,data就是value、constant、factory中定义的内容.
   $scope.fullName=user.getFullName();
}
.controller('MyCtrl',function($scope){
   //$realName、$url,$data就是value、constant、factory中定义的内容.
}
;

.service('user',function(){
   this.firstName='上官';
   this.lastName='飞燕';
   this.getFullName=function(){
     return this.firstName+this.lastName;
   }
})
等价于
------
function user(){
   this.firstName='上官';
   this.lastName='飞燕';
   this.getFullName=function(){
     return this.firstName+this.lastName;
   }
}
.factory('user,function(){
   return new user();
})
--------
也就是说：
.factory('user,fun)就是user=fun(),.service('user,fun)就是user=new fun();

factory和service是应用级别的,可以大controller之间共享数据.如果多个controller绑定的是factory
或service中的数据,那么这些数据在其中一个controller中发生改变时,其他controller中也会跟差改变,相当于
是全局变量.比如购物车应该定义为全局的.

ng-repeat指令:
特有属性($index,$first,$last、$odd:是否偶数条记录、$even:是否奇数条记录)
$index:数组下标,$first:如果是第一个元素就是true否则为false,$last如果是
最后一个就是true否则为false.

<body ng-app='app' ng-controller='AddressCtrl'>
<ul>
<li ng-repeat='addr in list' ng-class="{'selected':$fist}"></li>
   <h4>{{$index+1+'、'+addr.Address}}</h4>
</ul>
//ng-class="{'selected':$fist} : 如果是第一个，class加上selected.
</body>

angular.module('app',[])
.controller('AddressCtrl',function($scope){
    $scope.list=[{id:1,address:'莲花小区14栋2层'},{id:2,address:'XXXXX'},{id:3,address:'YYYYYY'}]
});

ng-checked
<input type='radio' ng-checked="user.sex==1"/>男
ng-selected:用于下拉框
<select>
<option ng-selected='user.sex==1'>男</option>
</select>
ng-checked也可以用于复选框.
<input type='checkbox' ng-checked="isChecked(1)"/>
$scope.isChecked=function(value){
if(....){return true}else{return false;}
}
$scope.register=function(u){
.....
}
ng-src
ng-disabled
<form name='f' ng-submit='register(user)'>
<input id='userName' type='text' required> required会要求必须填写
<button type='submit' ng-disabled='f.$invalid'></button>
</form>

$http:
angular.module('app',[])
.controller('AddressCtrl',function($scope,$http){
   $scope.addUser=function(){
    $http.post(url,{userName:$scope.userName})
       .success(function(result){
       });
        //$http.get与post使用方法一样.
   }
});

--------------------
$watch:
<select ng-model='depmentId'>
<option>...<option>
</select>
angular.module('app',[])
.controller('AddressCtrl',function($scope,$http){
   $scope.depmentId='';
   $scope.$watch('depmentId',function(){
       //$scope.depmentId的值发生变化时执行.
   }
});
--------------------
drective:
var app=angular.module('app',[]);
app.drective('hello',function(){
    return {
        restrict:'E',//E:element的意思
        replace:true,
        template:'<div>Hello AngularJS</div>'
    };
})
然后这么使用：
<body>
<hello></hello>
</body>
执行后html变成：
<body>
<div>Hello AngularJS</div>
</body>
如果replace不为true,执行后html变为：
<body>
<hello>
<div>Hello AngularJS</div>
</hello>
</body>
restrict还有'A'(属性attr),'C'(类名class):
app.drective('hello',function(){
    return {
        restrict:'A',
        link:function(){
            //.....
        }
    };
})
这样使用：
<div hello></div>
app.drective('hello',function(){
    return {
        restrict:'C',
        link:function(){
            //.....
        }
    };
})
这样使用：
<div class='hello'></div>
--------------------
<div enter='loadMoreData()'>test</div>
Directive 与 Controller 之间的会话
app.controller('AppCtrl',function($scope){
   $scope.loadMoreData=function(){
       alert('loadMore')
   };
})
app.directive('enter',function(){
   return function($scope,element,attrs){//直接返回function,这种是restrict为'A'的简写.
         element.bind('mouseenter',function(){
              //$scope.loadMoreData();//与ctroller交互了
              $scope.$apply(attrs.enter);//在div中把enter的值设置为'loadMoreData()'，所以就相当于$scope.loadMoreData()。
         });
   }
})
---------------------
app.directive('food',function(){
   return {
      restrict:'E',
      scope:{},
      controller:function($scope){
         $scope.foods=[];
         this.addApple=function(){
             $scope.foods.push('apple');
         }
         this.addOrange=function(){
             $scope.foods.push('orange');
         }
         this.addBanana=function(){
             $scope.foods.push('banana');
         }
      },
      link:function($scope,element,attrs){
         element.bind('mouseenter',function(){
            console.log($scope.foods);
         }
      }
   }
})
app.directive('apple',function(){
    return {
       requre:'food',//设置为food,这样，foodCtrl就是food中的controller.
       link:function($scope,element,attrs,foodCtrl){
           foodCtrl.addApple();
       }
    };
})
app.directive('orange',function(){
    return {
       requre:'food',//设置为food,这样，foodCtrl就是food中的controller.
       link:function($scope,element,attrs,foodCtrl){
           foodCtrl.addOrange();
       }
    };
})
app.directive('banana',function(){
    return {
       requre:'food',//设置为food,这样，foodCtrl就是food中的controller.
       link:function($scope,element,attrs,foodCtrl){
           foodCtrl.addBanana();
       }
    };
})
这样使用：
<food apple orange banana>所有食物</food>
<food apple orange>部分食物</food>
-------------------------------------------------
angular.element的用法
app.directive('hello',function(){
   return {
      retrict:'E',
      template:<div><input ng-model="txt"></div><div>{{txt}}</div>,
      link:function($scope,element){
          element.addClass('alert-box alert');//element相当jquery的功能,有很多方法,使用方法跟jquery类似.
      }
   }
});
----------------------------------------------------
lonic简介：
lonic是html5+css3移动app开发框架,接近原生,界面漂亮。
（js脚本是通过anglarjs封装的）
---------------------------------------
Cordova简介：html+css+js 开发手机app.

Ionic还将Cordova的一些常用插件用anglarjs封装了一套，就是ngcordova,见：ngcordova.com
-------------------------------------
开发环境搭建：
见：ionicframework.com/getting-started
安装node.js,然后在node.js的命令行执行：npn install -g cordova ionic 下载这两个库
下载完后，继续执行：ionic start myApp tabs ，创建一个项目，创建完成后，直接用浏览器打开index.html就可以看效果了。

也可以下载这个网站上提供的visual studio,里面已经设置好了。

ionicons.com : 有很多字体图标（iconfont）

=========================================================
过滤器：currency、lowercase、orderBy、uppercase.
例如：
{{ lastName | uppercase }}
<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
</li>
自定义过滤器：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "ybao";
});
app.filter('reverse', function() {
    return function(text) {
        return text.split("").reverse().join("");
    }
});
------------------
API：即AngularJS自带的一些有用的函数。
angular.lowercase()
angular.uppercase()
angular.isString()
angular.isNumber()
var u=angular.copy(user);//深克隆
-------------------
自定义指令：
ng-app、ng-model等指令是angular自带的,也可以自定义指令.
var app = angular.module("myApp", []);
app.directive("ybaoDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
使用驼峰法来命名一个指令， ybaoDirective, 但在使用它时需要以 - 分割, ybao-directive.
可以通过以下方式来调用指令:
元素名:<ybao-directive></ybao-directive>
属性:<div ybao-directive></div>
类名:<div class="ybao-directive"></div>
注释;
你可以限制你的指令只能通过特定的方式来调用:
var app = angular.module("myApp", []);
app.directive("ybaoDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
restrict 值可以是以下几种:
    E 作为元素名使用
    A 作为属性使用
    C 作为类名使用
    M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令.
-----------------------------
核心服务：有三四十个
1)$location:url地址,类似js中的location
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {//附：后面添加的这些参数$location就叫依赖注入，写上$location,angular会自动从Ioc容器中注入.
    $scope.myUrl = $location.absUrl();
});

2)$filter:过滤器
var app = angular.module('myApp',[]);
    app.controller('MyController',['$scope','$filter',function($scope,$filter) {
        $scope.lastName = "abcd";
        $scope.name = $filter('myfilter')('abcd');
    }]);
    app.filter("myfilter",function(){
        return function(input){
            return input+"filter";
        }
    });

3）$timeout
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {//$timeout内部会使用$watch,因此值发生改变时会改更新到页面,如果改为setTimeout,值发生改变不会更新到页面.
        $scope.myHeader = "How are you today?";
    }, 2000);
});
---
setTimeout(function () {
      $scope.myHeader = "How are you today?";
      $scope.$apply();//强制更页面,这样$scope.myHeader的值就会更新到页面,因为定时器是异步的,所以要手动更新。
}, 2000);

4）$interval：用法与$timeout一样.
5）$Http：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
例如：
$http.get("http://code.ybao.org/demo/src/Customers_JSON.php")
    .then(function (result) {/*注：result.data为服务器端返回的json*/
        $scope.names = result.data.records;
    });
6）路由: (附：ng-view)
    /*单页面应用*/
    /*ng-view:html放在ng-view为个容器中*/
    /*路由：'#/'会与'/'匹配,'#/computers'会与'/computers'匹配/
    <body ng-app='routingDemoApp'>
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>
        <div ng-view></div>
        <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
        <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script>
            angular.module('routingDemoApp',['ngRoute']) /*$routeProvider在ngRoute这个模块中，所以要引入ngRoute*/
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                .otherwise({redirectTo:'/'});//都不匹配则与'/'匹配.
            }]);
        </script>
    </body>
    template:如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
    .when('/computers',{template:'这是电脑分类页面'})
    templateUrl:如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
    $routeProvider.when('/computers', {
       templateUrl: 'embedded.home.html',
     });

<body ng-app="ngRouteExample" class="ng-scope">
     <script type="text/ng-template" id="embedded.home.html">
         <h1> Home </h1>
     </script>

      <script type="text/ng-template" id="embedded.about.html">
        <h1> About </h1>
      </script>

<div>
    <div id="navigation">
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>

    <div ng-view="">
    </div>
</div>
</body>
7）$watch、$digest、$apply：双向数据绑定就是靠这三个实现的。
ng-model、ng-bind会自动调用$watch.
$scope.$watch('参数',function(newValue,oldValue){
//逻辑处理
})
$digest 检查scope 中的所有数据(controller范围)，$apply 检查 $rootScope 中的所有数据(module范围).
========================================
自定义服务：
$http、$timeout等是angular自带的服务,可以自定义服务，自定义服务通过注入即可使用。
1)Factory:返回一个对象，是一个实例，直接使用.
2)Service:在Factory基础上建立的，返回值相当于一个类，需要用new实例化才能使用。
3)Provider:在Service基础上建立的,在Service基础上增加了一个config来进行初始化操作。
4)config和run
5)value和constant
Factory示例:
<script>
    //创建模型
    var app = angular.module('myApp', []);

    //通过工厂模式创建自定义服务
    app.factory('myFactory', function() {
        var service = {};//定义一个Object对象'
        service.name = "张三";
        var age;//定义一个私有化的变量
        //对私有属性写getter和setter方法
        service.setAge = function(newAge){
            age = newAge;
        }
        service.getAge = function(){
            return age;
        }
        return service;// 返回一个对象
    });
    //创建控制器
    app.controller('myCtrl', function($scope, myFactory) {
        myFactory.setAge(20);
        $scope.r =myFactory.getAge();
        alert(myFactory.name);
    });
    app.factory('myFactory', function () {
        var fun = function () {
            alert('函数调用');
        };
        return fun; // 返回值一个函数.
    });
</script>
Service示例：
<script>
    var app = angular.module('myApp', []);
    app.service('myService', function($http,$q) {
        this.name = "service";
        this.myFunc = function (x) {
            return x.toString(16);//转16进制
        }
        this.getData = function(){
            var d = $q.defer();
            $http.get("/jquery/demo_ajax_json.js")//读取数据的函数。
                .success(function(response) {
                d.resolve(response);
            })
                .error(function(){
                alert(0)
                d.reject("error");
            });
            return d.promise;
        }
    });
    app.controller('myCtrl', function($scope, myService) {
        $scope.r = myService.myFunc(255);
        myService.getData().then(function(data){
            console.log(data);//正确时走这儿
        },function(data){
            alert(data)//错误时走这儿
        });
    });
</script>
Sercie比Factory写起来简单点,所以一般使用Service而不是Factory.
Provider示例：
<script>
    var app = angular.module('myApp', []);

    //需要注意的是：在注入provider时，名字应该是：providerName+Provider
    app.config(function(myProviderProvider){
        myProviderProvider.setName("大圣");
    });
    app.provider('myProvider', function() {
        var name="";
        var test={"a":1,"b":2};
        //注意的是，setter方法必须是(set+变量首字母大写)格式
        this.setName = function(newName){
            name = newName
        }

        this.$get =function($http,$q){//方法名必须为:$get,返回一个对象,这个对象就是provider.
            return {
                getData : function(){
                    var d = $q.defer();
                    $http.get("/jquery/demo_ajax_json.js")//读取数据的函数。
                        .success(function(response) {
                            d.resolve(response);
                        })
                        .error(function(){
                            d.reject("error");
                        });
                    return d.promise;
                },
                "lastName":name,
                "test":test
            }
        }

    });
    app.controller('myCtrl', function($scope,myProvider) {
        alert(myProvider.lastName);
        alert(myProvider.test.a)
        myProvider.getData().then(function(data){
            alert(data)
        },function(data){
            alert(data)
        });
    });
</script>
value 和 contant:
<script>
    var app = angular.module('myApp', []);
    //app.value("defaultInput", 16);
    app.constant("defaultInput", 16);
    app.service('hexafy', function(defaultInput) {//先在参数中写上，然后直接引用。
        this.myFunc = function (x) {
       return x.toString(defaultInput);//defaultInput为16，所以转成16进制字符串.
        }
    });
    app.filter('myFormat',['hexafy', function(hexafy) {
        return function(x) {
            return hexafy.myFunc(x);
        };
    }]);
</script>
value不可以在config里注入,但是constant可以.
app.config(function(defaultInput,myProviderProvider){//defaultInput如果是constant定义的才可以注入.

    });

config和run:
run阶段是在config之后的在运行独立的代码。
        var myApp=angular.module("exampleApp", ["exampleApp.Services"]);

        myApp.constant("startTime", new Date().toLocaleString());
        myApp.config(function(startTime){
            console.log("Main module config: " + startTime);
        });
        myApp.run(function(startTime){
            console.log("Main module run: " + startTime);
        })
config是用来配置provider的.先angualr执行顺序：config->run->.....
==========================================================
ng-disable、ng-show、ng-hide、ng-if、ng-switch、ng-switch-when.
ng-click:
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
0</script>

ng-switch:
<body ng-app="">
<form>
选择一个选项:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
</div>
</div>
<p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>
</body>
==========================================================
表单验证：
$dirty:表单有填写记录.
$valid:字段内容合法的.
$invalid:字段内容是非法的
$pristine:表单没有填写记录.

<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>
===================================================
ng-option:
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
ng-repeat:
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
ng-repeat 有局限性，选择的值是一个字符串.
使用 ng-options 指令，选择的值是一个对象.
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
===================================================
<select ng-model="selectedProperty" ng-options="property for(property,value) in user">
</select>
/*user是一个对象*/

aspnet程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS

==================================================AngularJS四个核心思想：依赖注入模块化双向绑定语义化标签var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $http) { //$http就是依赖注入,自定义服务也可以注入,只要把自...
复制链接

扫一扫

专栏目录