angular.js

AngularJS [1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

第一个实例 hello{{name}}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myapp">

     <p>名字 : <input type="text" ng-model="name"></p>

     <h1>Hello {{name}}</h1>

</div>

</body>

</html>

网页加载完成，angularJS自动开启

ng-app指令告诉angularJS，<div>元素是angularJS应用程序的“所有者”。

ng-model指令把输入域的值绑定到应用程序变量name。

ng-bind指令把应用程序变脸name绑定到某个段落发innerHTML。

双向数据绑定

<!DOCTYPE html>

<html lang="en">

<head>

　　<meta charset="UTF-8">

　　<title>Document</title>

　　<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

　　<div ng-app="myApp" ng-controller="myCtrl">

　　　　名: <input type="text" ng-model="firstName"><br>

　　　　姓: <input type="text" ng-model="lastName"><br>

　　　　<br>

　　　　姓名: {{firstName + " " + lastName}} <!-- angular表达式 字符串-->

　　</div>

　　<script>

　　　　var app = angular.module('myApp', []);

　　　　app.controller('myCtrl', function ($scope) {

　　　　　　$scope.firstName = "John";

　　　　　　$scope.lastName = "Doe";

　　　　});

　　</script>

</body>

</html>

一，angular 表达式

1.angular对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

　　<p>姓为 {{ person.lastName }}</p>

　　<p>姓为 <span ng-bind="person.lastName"></span></p>

　　<!-- 二者显示结果相同。 -->

</div>

2.angular数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">

    <p>第三个值为 {{ points[2] }}</p>

</div>

二，angular指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

angular循环遍历，ng-repeat 指令用在一个对象数组上：

<div ng-app="" ng-init="names=[

{name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}]">

    <p>循环对象：</p>

    <ul>

        <li ng-repeat="x in names">

            {{ x.name + ', ' + x.country }}

        </li>

    </ul>

</div>

创建自定义的指令

除了angularJS内置的指令外，我们还可以创建自定义指令。

你可以使用.directive函数添加自定义指令。

要调用自定义指令，HTML元素上需要添加自定义指令名。

使用驼峰命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp">

    <runoob-directive></runoob-directive>

    <script>

        var app = angular.module("myApp", []);

        app.directive("runoobDirective", function () {

            return {

                template: "<h1>自定义指令!</h1>",

                //replace : true,

                //restrict : "EACM"

            };

        });

    </script>

</body>

你可以通过以下方式来调用指令：

a.元素名

b.属性

c.类名

d.注释

以下实例方式也能输出同样结果.

元素名:

<runoob-directive></runoob-directive>

属性:

<div runoob-directive></div>

类名:

<div class="runoob-directive"></div>

注释:

* replace 是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部：

如：

<my-directive></my-directive>

.directive("myDirective",function(){

        return {

               template:"<h3>世上无难事，只怕有心人</h3>"

        }

})

调用指令之后的结果如下（这是默认replace为false时的情况）：

<my-directive>

      <h3>世上无难事，只怕有心人</h3>

</my-directive>

如果replace被设置为了true：

.directive("myDirective",function(){

      return {

            replace:true,

            template:"<h3>世上无难事，只怕有心人</h3>"

      }

})

那么指令调用后的结果将是：

<h3>世上无难事，只怕有心人</h3>

* restrict 可以限制你的指令只能通过特定的方式来调用。

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

三，angularJS 九种内置过滤器

<!DOCTYPE html>

<html ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>内置过滤器</title>

</head>

<body>

    <div ng-controller="controllerTest01">

        <ul>

            <!-- currency处理函数，price是第一个参数，“￥”是第二个参数。显示的值是currency这个函数执行完成以后的返回值 -->

            <li>{{price|currency:"￥"}}</li>

            <li>{{nowdate|date:'yyyy/MM/dd hh:mm:ss EEEE'}}</li>

            <li>{{arr1|filter:'j'}}</li>

            <li>{{arr2|filter:{age:16} }}</li>

            <li>{{arr2|json }}</li>

            <li>{{arr1|limitTo:2}}</li>

            <li>{{str|uppercase|lowercase|limitTo:7}}</li>

            <li>{{num|number:2}}</li>

            <li>{{num2|number:4}}</li>

            <li>{{arr2|orderBy:"age":true}}</li>

        </ul>

    </div>

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

    <script>

        var App = angular.module("App", []);

        App.controller("controllerTest01", ['$scope', function ($scope) {

            // 内置过滤器  9个

            // 1. currency (货币处理),如果不传递参数，默认是美元符

            // 2. date (日期格式化)

            // 3. filter(匹配子串)

            // 4. json(格式化json对象)   跟stringify相同   没有参数

            // 5. limitTo(限制数组长度或字符串长度)

            // 6. lowercase(小写)   没有参数

            // 7. uppercase(大写)   没有参数

            // 8. number(格式化数字)   [参数]

            // 9. orderBy(排序)  [name,boolean]

            $scope.price = 99.99;

            $scope.nowdate = new Date();

            $scope.arr1 = ['html', "css", 'js', "hhhh", "j", "c"];

            $scope.arr2 = [

                { name: "jack", age: 20 },

                { name: "mack", age: 16 },

                { name: "sunny", age: 18 }

            ]

            $scope.str = "Hello World";

            $scope.num = "10.23456";

            $scope.num2 = 123456789

        }])

    </script>

</body>

</html>

自定义过滤器：

<!DOCTYPE html>

<html ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>自定义过滤器</title>

</head>

<body>

    <div ng-controller="controllerTest01">

        <h2>{{msg|demo:"abc":"bcd":"efg"}}</h2>

        <h3>{{val|firstUppercase:123}}</h3>

    </div>

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

    <script>

        var App = angular.module("App",[]);

        // 定义控制器

        App.controller("controllerTest01",['$scope',function($scope){

            $scope.msg = " world"

            $scope.val = "hello world"

        }])

        //自定义指令

        // App.directive('指令名',function(){

        //     return{}

        // })

        // 自定义过滤器

        App.filter('demo',function(){

            return function(val,a,b,c){    //demo就是一个函数

                console.log(val)            //world

                console.log(a,b,c)            //abc bcd efg

                // 显示值又是一个返回值

                return "hello" + val;

            }

        })

        // 自定义过滤器，首字母大写

        App.filter('firstUppercase',function(){

            return function(data,args){

                console.log(args)            //123

                return data[0].toUpperCase() + data.slice(1)

            }

        })

    </script>

</body>

</html>

四，angularJS 服务（Service）

<!DOCTYPE html>

<html ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>内置服务-$location</title>

</head>

<body>

    <div ng-controller="controllerTest01">

        <ul>

            <li>绝对路径：{{absurl}}</li>

            <li>服务：{{host}}</li>

            <li>查询字符串(参数)：{{search}}</li>

            <li>端口号：{{port}}</li>

            <li>协议:{{protocol}}</li>

            <li>哈希（锚点）：{{hash}}</li>

        </ul>

    </div>

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

    <script>

        var App = angular.module("App",[]);

        // $http   -- >   对ajax的一种封装

        // $log    -->    对congsole的封装

        // $timeout -->   定时器

        // $location    --> 对浏览器地址栏的封装

        App.controller("controllerTest01",['$scope','$location',function($scope,$location){

            console.log($location)

            $scope.absurl = $location.absUrl();

            $scope.host = $location.host();

            $scope.port = $location.port();

            $scope.search = $location.search();   //对http有要求

            $scope.protocol = $location.protocol();

            $scope.hash = $location.hash();

        }])

    </script>

</body>

</html>

内置服务——定时器

App.controller("controllerTest01",['$scope','$timeout','$interval',function($scope,$timeout,$interval){

    $timeout(function(){

        $scope.msg = "timeout执行了"

    },3000) 

    var timer = $interval(function(){

        $scope.datenow = new Date();

    },1000)

    $scope.stop = function(){

        $interval.cancel(timer)

    }

}])

内置服务——filter

<div ng-controller="controller01">

    <ul>

        <li>{{price}}</li>

        <li>{{str}}</li>

        <li>{{str1}}</li>

    </ul>

</div>

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

<script>

    var App = angular.module("App", []);

    App.controller("controller01", ['$scope', '$filter', function ($scope, $filter) {

        // $filter 可以引入九种内置的过滤器，这个是过滤器的第二种用法

        $scope.price = 99.99;

        var currency = $filter('currency');

        $scope.price = currency($scope.price);

        $scope.str = "hello angular";

        var uppercase = $filter('uppercase');

        $scope.str = uppercase($scope.str);

        $scope.str1 = $filter('limitTo')($scope.str, 5)

    }])

</script>

内置服务——http

App.controller("controller01",['$scope','$filter','$http',function($scope,$filter,$http){

    // $http 本质是对ajax的封装，放到服务底下运行

    // 1.5以上使用then方法，类似于promise中的then

    // 1.5以下就直接使用success方法和error方法

    // $http({

    //     method: 'GET',

    //     url: './02.json',

    //     params : {    //get请求的参数

    //         uname : 'aaaa',

    //         age : 30

    //     }

    // }).then(function(data){

    //     console.log(data);     //封装过的，该对象底下的data属性放的是数据

    //     console.log(data.data);

    // },function(err){

    //     console.log(err)

    // });

    $http({

        method : "POST",

        url : "/sendData",

        headers : {   //post请求最好设置请求头

            "content-type" : "application/x-www-form-urlencoded"

        },

        data : {    //post请求的参数

            uname : "aaa",

            age : 30

        }

    }).then(function(data){

        console.log(data)

        console.log(data.data.data);   //想要的后台的数据

    },function(err){

        console.log(err);

    })

}])

自定义服务：

要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系。

var App = angular.module("App", []);

　　// 定义一个服务，格式化对象

　　// {

　　// name : "jack",

   // age : 30

   // }

   // ?name=jack&age=30

   App.factory('format', ["$filter", function ($filter) {

       function fm(data) { //val 是一个对象

       　　var str = "?";

       　　for (var key in data) {

           　　str += key + "=" + data[key] + '&';

       　　}

           str = str.slice(0, -1);

           return str;

       }

       function aaa() {

           console.log('hello')

       }

       // 返回一个对象出去

       return {

           format: fm,

           aaa: aaa

       }

   }])

   App.controller("controller01", ['$scope', '$filter', '$http', 'format', '$log', function ($scope, $filter, $http, format, $log) {

       var data = {

           name: "jack",

           age: 30

       }

       format.aaa();

       $scope.str = format.format(data)

       $log.log(format.format(data));

   }])

angular.js 教程 -- 实例讲解的更多相关文章

Vue.js 教程 -- 实例讲解
一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...
[Angular JS教程] HeroService: getHeroes failed: undefined 问题解决方法
最近在学习入门Angular JS,学习资源是https://angular.cn/tutorial, 在学习到 "https://angular.cn/tutorial/toh-pt6模拟 ...
[转载]CSS教程:实例讲解定位Position
http://www.missyuan.com/thread-395406-1-1.html 1. position:static 所有元素的默认定位都是:position:static,这意味着元素 ...
Angular.js 以及个人学习网站
Angular.js 教程 http://www.360doc.com/content/14/0414/15/14416931_368816305.shtml web前端学习: 慕课网:http:/ ...
10+ 最佳的 Node.js 教程和实例
如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi ...
这是一份很详细的 Retrofit 2.0 使用教程（含实例讲解）（转）
前言在Andrroid开发中,网络请求十分常用而在Android网络请求库中,Retrofit是当下最热的一个网络请求库今天,我将献上一份非常详细Retrofit v2.0的使用教程,希望你们会 ...
这是一份很详细的 Retrofit 2.0 使用教程（含实例讲解）
前言在Andrroid开发中,网络请求十分常用而在Android网络请求库中,Retrofit是当下最热的一个网络请求库今天,我将献上一份非常详细Retrofit v2.0的使用教程,希望你们会 ...
Python爬虫教程-16-破解js加密实例（有道在线翻译）
python爬虫教程-16-破解js加密实例(有道在线翻译) 在爬虫爬取网站的时候,经常遇到一些反爬虫技术,比如: 加cookie,身份验证UserAgent 图形验证,还有很难破解的滑动验证 js签 ...
angular.js分页代码的实例
对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...

随机推荐

不同Mesh技术的比较-总结版
引言在过去的几年里,Mesh 网络逐渐变得流行,随之会有越来越多的无线产品面世.Mesh 网络技术作为一种无线自组网技术是物联网的核心技术.物联网的概念现在也逐渐贴近人们的生活, 据预测 2011 ...
zookeeper的命令使用
这篇是接着上篇zookeeper集群做的,所以有不熟悉的可以返回看下zookeeper集群的相关内容. 这里是相关的命名行使用方法: 基本命令用法连接server zkCli.sh -server ...
php5.3新垃圾回收机制详解
php的垃圾回收机制主要参考了http://blog.csdn.net/phpkernel/article/details/5734743 这文章. 变量对应的值,比如 $a="abc&qu ...
[Leetcode]315.计算右侧小于当前元素的个数 (6种方法)
链接给定一个整数数组 nums,按要求返回一个新数组 counts.数组 counts 有该性质: counts[i] 的值是 nums[i] 右侧小于 nums[i] 的元素的数量. 示例: 输 ...
[原创]K8正方系统密码解密工具
工具: K8_zfsoftDecode编译: 自己查壳组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8.blog.163.com发布: 2015/8/1 1 ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
DDD漫想
领域专用语言领域驱动设计(Domain Driver Design)开发中,最令我震撼的是领域专用语言(Domain specific language),领域专用语言专注于描述当前领域内的业务细节 ...
多线程的实现及常用方法_DAY23
1:多线程(理解) (1)如果一个应用程序有多条执行路径,则被称为多线程程序. 进程:正在执行的程序. 线程:程序的执行路径,执行单元. 单线程:如果一个应用程序只有一条执行路径,则被称为单线程程序. ...
rubymine debug需要安装依赖
for ruby2.x gem install ruby-debug-ide --pre gem install debase --pregem install debugger2 --pre
poj1330-----------关于公共祖先的问题
关于公共祖先的问题分类: 这类问题有多种解法和类型,根据题目给出的信息去判断使用哪一种 1.给你树,只支持从父亲找儿子,不支持儿子找父亲,最后要求最近公共祖先,使用dfs或者分治 2.支持儿子找父亲, ...

angular.js 教程 -- 实例讲解