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 ...

随机推荐

STM32 F4 SPI Accelerometer
STM32 F4 SPI Accelerometer
echarts 去掉网格线
去掉 xAxis : [ splitLine:{ show:false }], yAxis : [ splitLine:{ show:false }]
Snmp学习总结(五)——WindowsServer2008安装和配置SNMP
一.安装SNMP 在Windows Server 2008以及Windows Server 2008 R2中,SNMP是以一个服务器功能的形式存在的,SNMP的安装步骤如下所示: 1.打开[开始]→[ ...
firedac连接WINDOWS的ORACLE
firedac连接WINDOWS的ORACLE 首先安装OCI FOR WINDOWS.OCI分WIN32和WIN64,且OCI的版本要和ORACLE的版本相一致才行. FIREDAC指定OCI驱动程 ...
UIView 的旋转和缩放
原文地址:http://www.cnblogs.com/gaoxiao228/archive/2012/05/04/2483577.html label.transform = CGAffineTra ...
Android之Monkey全参数（包含隐藏参数）
http://blog.csdn.net/jlminghui/article/details/38238443 参数如下: 注意:以下例子中命令均为Windows cmd命令窗口运行环境,往外官网列出 ...
python测试开发django-25.表单提交之post注册案例
前言一个网站上新用户注册,会写个注册页面,如果用django写个注册页面的流程呢? 本篇以post请求示例,从html页面上输入用户注册信息,提交到后台处理数据,然后传参数据到User数据库表里面 ...
Work Management Service application in SharePoint 2016
最近开始弄SharePoint 2016的Workflow,遇到问题发现没有了Work Management Service application,然后用PowerShell命令创建也不行,bing ...
SharePoint 2016 工作流报错“没有适用于此应用程序的地址”
前言最近为SharePoint 2016配置工作流,创建工作流的过程中遇到这样一个错误,记录分享下来,希望能够为有需要的人带来帮助. 错误截图创建完毕工作流,发布的时候报错,保存没有问题. 错误信 ...
mysql中文显示问号，不能识别中文的解决方案
到后台mysql中查看是问号. 并不能显示出中文,初步判定是编码的问题. 我们利用 show variables like'character_set_%'; 与 show variables lik ...

Angular入门笔记

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

随机推荐

热门专题