Home >Web Front-end >JS Tutorial >Basics of getting started with angularJS_AngularJS

Basics of getting started with angularJS_AngularJS

WBOYOriginal: 2016-05-16 16:15:071239browse

angular 　　

All libraries used, all CDNs used:

Copy code The code is as follows:

.angular data binding example, this is the most basic, all branches and leaves of angular start from here:.

Copy code The code is as follows:

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

angular
　　

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

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

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

复制代码代码如下:

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

angular
　　

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

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

数据过滤器;

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

复制代码代码如下:

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

angular
　　

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?
                                                                                                                             app.directive("heh", function() {
                       return {
                          restrict: "AE",
Replace : true,
transclude : true,
template : '

'
                    };
                 })

Using the .ng-switch directive (this is very similar to the template, it is our common angular method of clicking to hide and show the Tab plug-in)::

Copy code The code is as follows:

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

angular
　　

ng-switch的使用

other

ng-src和ng-href;

复制代码代码如下:

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

angular
　　

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

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

复制代码代码如下:

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

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

使用模板

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

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

angular中的工具方法列表

angular.reloadWithDebugInfo

angular.toJson

angular.uppercase

These tools and methods are similar to other libraries;
                 angular.element is a small JQ for anguarLite to select elements;
                                                                                                 Angular.module is a method of module element;

Usage of ng-transclude (this is the official case), the code is as follows:

Copy code

The code is as follows:

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

angular
　　

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

NGPaste and ngmouseup and ngkeyup, ngmodeloptions ....... For reference to the official use, just check the API, (the official wants FQ;)