Angular入门笔记

AngularJS（下面简称其为ng）是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。

一、历史

　　AngularJS最初由Misko Hevery和Adam Abrons于2009年开发，后来成为了Google公司的项目。

　　当前最新版是：1.2.0-beta.10

　　当前最新稳定版是：1.2.16

二、授权

　　Angular是开源免费的。授权协议是：MIT

　　GitHub地址：https://github.com/angular/angular.js

三、兼容性

　　Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

　　对于早期IE版本，请参考： Internet Explorer Compatibility

五、核心特性

　　1.MVC

　　2.模块化

　　3.自动化双向数据绑定

　　4.语义化标签

　　5.依赖注入

六、优缺点

　　如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用，就不是AngularJS的用武之地了。

七、使用Angular

　　1.新建一个名为index的网页。

<!DOCTYPE html>

<head>

     <title>Learning AngularJS</title>

</head>

<body>

</body>

</html>

　　2.引入Angular.js文件

<!DOCTYPE html>

<head>

     <title>Learning AngularJS</title>

      <script src="./angular.min.js"></script>

</head>

<body>

</body>

</html>

　　也可以使用谷歌的cdn

　　https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js

　　3.使用ng-app来声明Angular的边界，使用ng-controller来声明其使用的控制器

<!DOCTYPE html>

<html>

<head>

    <title>Learning AngularJS</title>

    <script src="./angular.min.js"></script>

    </head>

<body>

   <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

   </div>

</body>

</html>

　　4.在index.html文件同目录下新建app.js，并写入以下内容。

//module方法传入作用域和初始化的模块数组（此处为空数组）

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

　　5.在index.html同目录下新建maincontroller.js并写入以下内容

app.controller("MainController", function($scope){　　//传入的$scope表示变量的作用域

　　

});

　　6.将app.js和maincontroller.js分别引入到index.js目录中。App.js要先于maincontroller.js引入

<!DOCTYPE html>

<html>

<head>

    <title>Learning AngularJS</title>

    <script src="./angular.min.js"></script>

    <script src="app.js" type="text/javascript"></script>

    <script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

</div>

</body>

</html>

　　7.在maincontroller.js中添加$scope的变量

app.controller("MainController", function($scope){

//为作用域内的understand变量赋值，这样页面上的{{understand}}就得到相应的值了

$scope.understand = "I now understand how the scope works!";　　

});

　　8.在index.js页面中写上要访问的变量

<!DOCTYPE html>

<html>

<head>

    <title>Learning AngularJS</title>

    <script src="./angular.min.js"></script>

    <script src="app.js" type="text/javascript"></script>

    <script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

    {{understand}}

</div>

</body>

</html>

　　{{}}双大括号，这是ng的模板中用于书写表达式的标记，ng成功运行起来后，{{}}内的表达式会生效

　　9.效果

　　{{understand}}变成了I now understand how the scope works!了

八、模板与数据的双向绑定

　　例一：

　　　　1.修改maincontroller.js文件如下

app.controller("MainController", function($scope){

     $scope.inputValue = "";

});

　　　　2.修改index.html文件如下:

<!DOCTYPE html>

<head>

	<title>Learning AngularJS</title>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

	<script src="app.js" type="text/javascript"></script>

	<script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

	<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

		<input type='text' ng-model='inputValue' />

		{{inputValue}}

	</div>

</body>

</html>

　　　　3.效果

　　　　这里我们使用了ng-modle这个指令，我们使用它分别为输入框中的值和$scope中的变量inputValue进行了双向绑定，这样当输入框内的值发生变化时，函数中的变量也会跟随变化，它的变化会实时反馈在后面的区域中

　　例二:二级select联动

　　　　1.修改maincontroller.js文件内容如下：

app.controller("MainController", function($scope){

	$scope.selectedPerson = 0;

	$scope.selectedGenre = null;

	$scope.people = [

		{

			id: 0,

			name: 'Leon',

			music: [

				'Rock',

				'Metal',

				'Dubstep',

				'Electro'

			]

		},

		{

			id: 1,

			name: 'Chris',

			music: [

				'Indie',

				'Drumstep',

				'Dubstep',

				'Electro'

			]

		},

		{

			id: 2,

			name: 'Harry',

			music: [

				'Rock',

				'Metal',

				'Thrash Metal',

				'Heavy Metal'

			]

		},

		{

			id: 3,

			name: 'Allyce',

			music: [

				'Pop',

				'RnB',

				'Hip Hop'

			]

		}

	];

});

　　　　2.修改index.html文件的内容如下：

<!DOCTYPE html>

<head>

	<title>Learning AngularJS</title>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

	<script src="app.js" type="text/javascript"></script>

	<script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

	<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

		<select ng-model='selectedPerson' ng-options='obj.name for obj in people'></select>

		<select ng-model='selectedGenre'>

			<option ng-repeat='label in people[selectedPerson.id].music'>{{label}}</option>

		</select>

	</div>

</body>

</html>

　　　　ng-repeat表示循环输出

　　　　3.效果

　　　　这个例子实现了二级联动的效果

九、Angular的数据过滤

　　1.修改index.html文件内容如下:

<!DOCTYPE html>

<html>

<head>

    <title>Learning AngularJS</title>

    <script src="./angular.min.js"></script>

    <script src="app.js" type="text/javascript"></script>

    <script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

    <input type='text' ng-model='searchText' />

    <ul>

        <li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>

    </ul>

</div>

</body>

</html>

　　2.效果

　　当在输入框中输入文字时，下面的列表就会根据输入的文字进行过滤

十、使用Angular显示或隐藏元素

　　1.修改maincontroller.js文件如下：

app.controller("MainController", function($scope){

  $scope.people = [

        {

            id: 0,

            name: 'Leon',

            music: [

                'Rock',

                'Metal',

                'Dubstep',

                'Electro'

            ],

            live: true

        },

        {

            id: 1,

            name: 'Chris',

            music: [

                'Indie',

                'Drumstep',

                'Dubstep',

                'Electro'

            ],

            live: true

        },

        {

            id: 2,

            name: 'Harry',

            music: [

                'Rock',

                'Metal',

                'Thrash Metal',

                'Heavy Metal'

            ],

            live: false

        },

        {

            id: 3,

            name: 'Allyce',

            music: [

                'Pop',

                'RnB',

                'Hip Hop'

            ],

            live: true

        }

    ];

});

　　2.修改index.html文件如下

<!DOCTYPE html>

<html>

<head>

    <title>Learning AngularJS</title>

    <script src="./angular.min.js"></script>

    <script src="app.js" type="text/javascript"></script>

    <script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

    <input type='text' ng-model='searchText' />

    <ul>

        <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>

    </ul>

    <ul>

        <li ng-repeat='person in people | filter:searchText' ng-hide='person.live == false'>#{{person.id}} {{person.name}}</li>

    </ul>

</div>

</body>

</html>

　　ng-show与ng-hide，用于控制元素的显示和隐藏

　　3.效果

　　可以看出，live=false的#2被隐藏了

十一、事件绑定

　　1.修改index.html内容如下：

<!DOCTYPE html>

<head>

  <title>Learning AngularJS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

    <script src="app.js" type="text/javascript"></script>

    <script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

    <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

        <input type='text' ng-model='searchText' />

        <ul>

            <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>

        </ul>

        <input type='text' ng-model='newPerson' />

        <button ng-click='addNew()'>Add</button>

    </div>

</body>

</html>

　　2.修改maincontroller.js文件内容如下

app.controller("MainController", function($scope){

  $scope.people = [

        {

            id: 0,

            name: 'Leon',

            music: [

                'Rock',

                'Metal',

                'Dubstep',

                'Electro'

            ],

            live: true

        },

        {

            id: 1,

            name: 'Chris',

            music: [

                'Indie',

                'Drumstep',

                'Dubstep',

                'Electro'

            ],

            live: true

        },

        {

            id: 2,

            name: 'Harry',

            music: [

                'Rock',

                'Metal',

                'Thrash Metal',

                'Heavy Metal'

            ],

            live: false

        },

        {

            id: 3,

            name: 'Allyce',

            music: [

                'Pop',

                'RnB',

                'Hip Hop'

            ],

            live: true

        }

    ];

    $scope.newPerson = null;

    $scope.addNew = function() {

        if ($scope.newPerson != null && $scope.newPerson != "") {

            $scope.people.push({

                id: $scope.people.length,

                name: $scope.newPerson,

                live: true,

                music: []

            });

        }

    }

});

　　3.效果

　　点击add按钮的时候，people数组会新增一个元素，然后模板中的变量会自动的更新，然后页面跟着改变

十二、优点与缺点

　　优点：

　　1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；
　　2. 是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能；
　　3. 自定义Directive，比JQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；
　　4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

　　缺点：

　　1.angular 入门很容易但深入后概念很多, 学习中较难理解.

　　2.中文教程非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.

　　3.对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

　　4.不利于seo.(SEO目前也有了prerender解决方案) https//prerender.io

　　5.不适合交互频繁的，如游戏之类交互体验网站。

Angular入门笔记的更多相关文章

每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
[Java入门笔记] 面向对象编程基础（二）：方法详解
什么是方法? 简介在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...
redis入门笔记(2)
redis入门笔记(2) 上篇文章介绍了redis的基本情况和支持的数据类型,本篇文章将介绍redis持久化.主从复制.简单的事务支持及发布订阅功能. 持久化 •redis是一个支持持久化的内存数据库 ...
redis入门笔记(1)
redis入门笔记(1) 1. Redis 简介 •Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure serv ...
OpenGLES入门笔记四
原文参考地址:http://www.cnblogs.com/zilongshanren/archive/2011/08/08/2131019.html 一.编译Vertex Shaders和Fragm ...
OpenGLES入门笔记三
在入门笔记一中比较详细的介绍了顶点着色器和片面着色器. 在入门笔记二中讲解了简单的创建OpenGL场景流程的实现,但是如果在场景中渲染任何一种几何图形,还是需要入门笔记一中的知识:Vertex Sha ...
angular入门
angular入门 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

随机推荐

vbs学习笔记1——判断文件和文件夹是否存在
首先分享一个“VBS脚本常用经典代码收集”,这里面关于vbs很丰富的内容. 所有vbs脚本都需要保存为.vbs形式才可以运行 FileSystemObject Object的所有方法参考:http:/ ...
Yarn中ResourceManager的RPC协议
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemNjXzAwMTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
使用JavaScript的数组实现数据结构中的队列与堆栈
今天在项目中要使用JavaScript实现数据结构中的队列和堆栈,这里做一下总结. 一.队列和堆栈的简单介绍 1.1.队列的基本概念队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被 ...
Bootstrap碎语
这里记录下某段时间Bootstrap的零散碎片. 1.有关Bootstrap的参考网站: ● 官方:http://getbootstrap.com/● 主题:http://bootswatch.com ...
解决ASP.NET MVC4中使用Html.DropDownListFor显示枚举值默认项问题
从ASP.NET MVC 5开始,Html.DropDownListFor已经提供了对Enum的支持,但在这以前,需要通过帮助方法或扩展方法来让Html.DropDownListFor显示枚举值. 本 ...
WCF X.509证书双向认证小结
最近在学习WCF X.509证书验证,想实现使用证书实现服务端和客户端的双向认证,实现原理是利用了数字证书包含的一对非对称密钥来实现数字签名及加密.所谓非对称密钥是采用两个密钥将加密和解密能力分开:一 ...
Android4.1中BinderService的作用
http://blog.csdn.net/lsdmx2016/article/details/8772583 Android4.1 中出现了一个新的类,BinderService,所有的Native ...
Linux、apache 无法使用PHP创建目录和文件
因为项目的需要,这几天搭建了虚拟机,环境是centos7+lamp,可是搭建好网站后,即使把权限放开了(777),我试了改父文件夹权限:重新创建文件夹,改权限再移动文件:更换文件夹的属主.统统不行.这 ...
Mac环境配置－ iOS开发人员 -待续
Mac环境记录 Mac 相关目录相关显示: $ defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏: $ default ...
ubuntu php 安装
---apache2sudo apt-get install apache2 ---phpsudo apt-get install libapache2-mod-php5 php5 php5-gd p ...

Angular入门笔记

Angular入门笔记的更多相关文章

随机推荐

热门专题