angularJS 入门基础_AngularJS

angular 　　

所有用到的库, 全部用的CDN：

复制代码 代码如下:

    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   

.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            angular最强大的东西,数据的绑定binding
       

       

           

               
                {{data}}
                <script><br /> app.controller("bf", function($scope) {<br /> $scope.data = "testData";<br /> //$scope.$apply();<br /> });<br /> </script>
           

       

   

通过angular,展示数组对应的数据;.

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            通过angular,展示数组对应的数据;
       

       

           

               
               

                   
• 
                          {{i.name}}----{{i.age}}
                     

               

                <script><br /> //angular.module("arr-app", []);<br /> function arrCon($scope) {<br /> $scope.flag = 0;<br /> $scope.bered = function(i) {<br /> $scope.flag = i;<br /> };<br /> $scope.lists = [<br /> {name : "hehe",<br /> age:10},<br /> {<br /> name : "xx",<br /> age : 20<br /> },<br /> {<br /> name : "yy",<br /> age : 2<br /> },<br /> {<br /> name : "jj",<br /> age : 220<br /> }<br /> ]<br /> };<br /> </script>
           

       

   

.数据过滤器的DEMO：

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            数据过滤器;
       

       

            {{sourCode}}
           

            {{sourCode | up}}
       

        <script><br /> function filte($scope) {<br /> $scope.sourCode = "hehe lala dudu oo zz";<br /> };<br /> app.filter("up" ,function() {<br /> return function(ipt) {<br /> return ipt.replace(/ (\w)/g,function($0,$1) {<br /> return " "+$1.toUpperCase();<br /> });<br /> }<br /> });<br /> </script>
   

.factory工厂, $provider, service等等都是一样样的, 不要感觉很难, 其实就是看出一个数据模型或者实例就好了;：

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;
       

       

            {{json}}
            <script><br /> app.factory("ff", function() {<br /> return {<br /> "noting" : "json"<br /> };<br /> });<br /> app.controller("factory", function($scope, ff) {<br /> $scope.json = ff;<br /> });<br /> </script>
       

   

   

       

            angular的指令;
       

       

            do you content for?
            <script><br /> app.directive("heh", function() {<br /> return {<br /> restrict : "AE",<br /> replace : true,<br /> transclude : true,<br /> template : '<div> <button class="btn-danger" ng-transclude></script>

'
                    };
                })
           
       

   

.ng-switch指令的使用(这个跟模板很想的,就是我们常见的点击隐藏和显示Tab插件的angular首先):：

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            ng-switch的使用
       

       

           

               

                   
• 1

                   
• 2

                   
• other

               

             

             

                  test
                  test     
                  test
             

       

       
   

ng-src和ng-href;

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的)
       

       

           
               
           
       

       
   

如何操作页面的样式,这个直接改绑定的数据模型就好了：

复制代码 代码如下:

   

       

            angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)
       

       

           
                hehe--o(^▽^)o哇;
           
       

       

+-

'
                }
            })
       
   

angular中的模板如何使用,这个要配合路由器使用比较叼:

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            使用模板
       

       

                       
           
                           
           

           

                change
           

       

       
   

如何使用$scope.$watch实时改变绑定界面的模板:

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            updateangular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;
       

       

            {{hehe}}
           
           

                the value set by $scope.$watch ==>> {{wat}}
           

           

           
                applay;
           
       

       
   

angular中自己定义的工具方法

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            angular中的工具方法列表
       

       

           

             
• angular.bind

             
• angular.bootstrap

             
• angular.copy

             
• angular.element

             
• angular.equals

             
• angular.extend

             
• angular.forEach

             
• angular.fromJson

             
• angular.identity

             
• angular.injector

             
• angular.isArray

             
• angular.isDate

             
• angular.isDefined

             
• angular.isElement

             
• angular.isFunction

             
• angular.isNumber

             
• angular.isObject

             
• angular.isString

             
• angular.isUndefined

             
• angular.lowercase

             
• angular.module

             
• angular.noop

             
• angular.reloadWithDebugInfo

             
• angular.toJson

             
• angular.uppercase

           

           

                这些工具方法跟其他库差不多;
                angular.element是anguarLite选择元素的小JQ;
               

                angular.module是模块元素的方法;
           

       

   

ng-transclude的使用(这个是官方的案例)，代码如下:

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            ng-transclude的使用(这个是官方的案例):
       

       

           

             

             

              {{text}}
           

       

       

' +
                            '' +
                          '

'
              };
          })
          .controller('ExampleController', ['$scope', function($scope) {
            $scope.title = 'Lorem Ipsum';
            $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
          }]);
       
   

一下验证邮箱准确性的例子:

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
   


   
   

       

            ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法参考官方的使用,要用查API就好了,(官方的要FQ哦;)
       

        ">https://yearofmoo.github.io/ngMessages/angular-messages.js">>
       

            如果不用ng-message组件的错误提示如下;
       

         

            Enter your email address:
           
           
           

              You forgot to enter your email address...