angularJS 入门基础_AngularJS-js教程-PHP中文网

首页

web前端

js教程

angularJS 入门基础_AngularJS

May 16, 2016 pm 04:15 PM

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">

angular
　　
    ">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">

angular

">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">

angular

">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">

angular

">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首先):：

复制代码代码如下:

ng-switch的使用

other

ng-src和ng-href;

复制代码代码如下:

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

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

复制代码代码如下:

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

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

'
                }
            })

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

复制代码代码如下:

使用模板

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

复制代码代码如下:

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

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

angular中自己定义的工具方法

复制代码代码如下:

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的使用(这个是官方的案例)，代码如下:

复制代码代码如下:

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

' +
'' +
'

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

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

复制代码代码如下: