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应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...

随机推荐

解放双手 | Jenkins + gitlab + maven 自动打包部署项目
前言记录 Jenkins + gitlab + maven 自动打包部署后端项目详细过程! 需求背景不会偷懒的程序员不是好码农,传统的项目部署,有时候采用本地手动打包,再通过ssh传到服务器部署运 ...
【sping揭秘】2、关于spring配置文件
<import>标签引入其他的配置文件,如果A.xml 中的<bean>定义可能依赖B.xml中的某些<bean>定义,那么可以再A.xml中使用这种方式< ...
javascript数据结构与算法--高级排序算法（快速排序法，希尔排序法）
javascript数据结构与算法--高级排序算法(快速排序法,希尔排序法) 一.快速排序算法 /* * 这个函数首先检查数组的长度是否为0.如果是,那么这个数组就不需要任何排序,函数直接返回. * ...
ES配置文件中文版
##################### Elasticsearch Configuration Example ##################### # This file contains ...
神经网络优化方法总结：SGD，Momentum，AdaGrad，RMSProp，Adam
1. SGD Batch Gradient Descent 在每一轮的训练过程中,Batch Gradient Descent算法用整个训练集的数据计算cost fuction的梯度,并用该梯度对模型 ...
poi导出联动下拉选择的excel
最近碰到一个功能, 觉得可以记录下来. 在web中, 经常会碰到上下级的数据, 或者是联动数据, 比如省市联动. 那么在导入数据的时候, 是否可以在动态生成的模板中, 加入联动限制呢. 一. 数据准备 ...
Visual Studio自带的的Developer Command Prompt对话框
简单了解Visual Studio的Developer Command Prompt VS2008的命令为:Visual Studio 2008 Command Prompt 目录是: 其详细信息如下 ...
第一次项目上Linux服务器（七:——Tomcat+ngnix+域名的简单配置）
1.准备工作安装好jdk+tomcat+nginx相关配置,请参考历史博客 2.修改Nginx配置文件修改配置文件如下: 3.修改Tomcat配置文件修改配置文件如下: 配置文件连接: ngni ...
GCD之定时器dispatch_source_t(转载暂时未完全理解)
#import "ViewController.h" @interface ViewController (){ IBOutlet UIButton *l_timeButton; ...
django2.1---admin 修改模块的名字为中文显示
只需要写两个地方 1.应用下的__init__.py default_app_config = 'user.apps.UserConfig' 2.应用下apps.py from django.apps ...

angular.js 教程 -- 实例讲解