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

首页

web前端

js教程

angularJS 入门基础_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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...';
          }]);

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

复制代码代码如下:

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

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

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles