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

随机推荐

mongodb chunk 大小设置
默认是64MB,取值范围是1 MB 到 1024 MB. 那改动会造成什么?下表简单总结: chunk size 调节 splitting次数(碎片数) 数据跨shard数目数据均匀网络传输次数 ...
CentOS 6.8 安装 Python3
由于没有GCC无法编译安装Python3.6, 所以先安装GCC(yum install gcc) 下载地址:https://www.python.org/ftp/python/ 1 tar zxvf ...
Linux网络设备驱动架構學習（二）
Linux网络设备驱动架構學習(二) 接下來會從以下幾個方面介紹網絡設備驅動的編寫流程: 1.網絡設備的註冊與註銷 2.網絡設備的初始化 3.網絡設備的打開與釋放 4.網絡數據發送流程 5.網絡數據接 ...
Java基础加强总结(三)——代理(Proxy)
一.代理的概念动态代理技术是整个java技术中最重要的一个技术,它是学习java框架的基础,不会动态代理技术,那么在学习Spring这些框架时是学不明白的. 动态代理技术就是用来产生一个对象的代理对 ...
C#写UTF8文件时指定是否含BOM头
BOM的基本概念在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符,它的编码是FEFF.而FFFE在UCS中是不存在的字符,所以不应该出现在实 ...
Xamarin.Forms.Xaml.XamlParseException: MarkupExtension not found for trans:Translate using a PCL in Release Mode
I'm pretty desperate finding the solution for the problem stated below. I have a cross platform solu ...
AngularJS订阅API服务
本篇使用AngularJS实现订阅某个API服务. 首页大致是: 其中,what's on显示首页内容,Search通过输入关键词调用API服务显示到页面,MyShows显示订阅的内容. Sarch页 ...
win10如何彻底删除Gis|彻底卸载ArcGis的方法说明
ArcGIS产品线为用户提供一个可伸缩的,全面的GIS平台.ArcObjects包含了许多的可编程组件,从细粒度的对象(例如单个的几何对象)到粗粒度的对象(例如与现有ArcMap文档交互的地图对象)涉 ...
Swift - 用CATransform3DMakeRotation实现翻页效果
Swift - 用CATransform3DMakeRotation实现翻页效果效果源码 https://github.com/YouXianMing/Swift-Animations // // ...
实习医生格蕾第一季/全集Grey’s Anatomy迅雷下载
第一季 Grey's Anatomy Season 1 (2005)看点:欢迎来到格雷斯医院,哈佛医学院西区最艰苦的外科住院医实习程序,医务新人最残酷的训练场.Meredith.Izzie和Chris ...

Angular入门笔记

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

随机推荐

热门专题