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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7672

CakePHP 教程

1393

C# 教程

1207

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验 Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

使用PHP和AngularJS构建Web应用 May 27, 2023 pm 08:10 PM

随着互联网的不断发展，Web应用已成为企业信息化建设的重要组成部分，也是现代化工作的必要手段。为了使Web应用能够便于开发、维护和扩展，开发人员需要选择适合自己开发需求的技术框架和编程语言。PHP和AngularJS是两种非常流行的Web开发技术，它们分别是服务器端和客户端的解决方案，通过结合使用可以大大提高Web应用的开发效率和使用体验。PHP的优势PHP

wps表格入门基础教程手机版 Mar 20, 2024 pm 06:46 PM

　　现在的手机不单单是通讯的工具，功能也不仅限于发信息打电话，现在智能化也深入到生活当中，给我们的生活带来了方便，智能手机现在已经基本代替了电脑的作用。今天我们就和大家一起来学习wps表格入门基础教程手机版的内容。　　　　1、点击手机中wps软件，一般手机都自带该软件，没有的话，可以下载一个，方便以后使用。一般出现的是最近查看的文档，点击下方第三个按钮，即“新建”按钮：　　　　　　2、我们要制作表格，因此，点击中间的“表格”图标。　　　　　　3、你可以开始编辑表格，键盘和常用工具都在下方的菜单中

使用Flask和AngularJS构建单页Web应用程序 Jun 17, 2023 am 08:49 AM

随着Web技术的飞速发展，单页Web应用程序（SinglePageApplication,SPA）已经成为一种越来越流行的Web应用程序模型。相比于传统的多页Web应用程序，SPA的最大优势在于用户感受更加流畅，同时服务器端的计算压力也大幅减少。在本文中，我们将介绍如何使用Flask和AngularJS构建一个简单的SPA。Flask是一款轻量级的Py

如何在PHP编程中使用AngularJS？ Jun 12, 2023 am 09:40 AM

随着Web应用程序的普及，前端框架AngularJS变得越来越受欢迎。AngularJS是一个由Google开发的JavaScript框架，它可以帮助你构建具有动态Web应用程序功能的Web应用程序。另一方面，对于后端编程，PHP是非常受欢迎的编程语言。如果您正在使用PHP进行服务器端编程，那么结合AngularJS使用PHP将可以为您的网站带来更多的动态效

使用PHP和AngularJS开发一个在线文件管理平台，方便文件管理 Jun 27, 2023 pm 01:34 PM

随着互联网的普及，越来越多的人在使用网络进行文件传输和共享。然而，由于各种原因，使用传统的FTP等方式进行文件管理无法满足现代用户的需求。因此，建立一个易用、高效、安全的在线文件管理平台已成为了一种趋势。本文介绍的在线文件管理平台，基于PHP和AngularJS，能够方便地进行文件上传、下载、编辑、删除等操作，并且提供了一系列强大的功能，例如文件共享、搜索、

AngularJS基础入门介绍 Apr 21, 2018 am 10:37 AM

这篇文章介绍的内容是关于AngularJS基础入门介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下。

See all articles

angularJS 入门基础_AngularJS

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题