AngularJS学习笔记(1) - AngularJS入门
什么是AngularJS?
AngularJS是建立在jQuery的一个轻量级版本之上的MVC框架。MVC将业务逻辑代码和视图、模型相分离。AngularJS提供的所有功能都可以通过使用JavaScript和jQuery来实现。
为什么选择AngularJS?
- AngularJS框架强制正确实现MVC,并且可以很容易的正确实现。
- AngularJS HTML模板的声明风格,使得HTML的意图更加直接,并且使得HTML更容易维护。
- AngularJS的模型部分是基本的JavaScript对象,因此容易操作、访问和执行。
- AngularJS使用声明的方式,通过将HTML的声明和背后的JavaScript功能直接联系来扩展HTML的功能。
- AngularJS提供了一个非常简单和灵活的过滤器接口,使得当数据从模型传递到视图时,你可以轻松的格式化数据。
- AngularJS应用程序倾向于使用传统JavaScript应用程序所使用代码的一小部分,因此你只需要关注逻辑,而不用关心琐碎的细节。
- AngularJS比传统的方法所需的文档对象模型操作少了很多,并指导你把操作放在应用程序中正确的位置。
- AngularJS提供了一些内置服务,并使你能够用结构化和可重用的方式实现自己的服务。
AngularJS的一些基本概念
模块
作用域和数据模型
具有模板和指令的视图
表达式
控制器
数据绑定
服务
依赖注入
职责分离
- 视图作为应用程序的正式表示结构,表明任何表示逻辑都应该作为视图中的HTML模板指令。
- 如果需要进行任何DOM操作,就在一个内置指令或者自己自定义的指令中的JavaScript代码中进行。
- 把任何可重复使用的任务都实现为服务,并通过依赖注入把它们添加到你的模块。
- 确保作用域反映了模型的当前状态,并且是由该视图使用的数据的单一来源。
- 确保控制器代码只起到了充实作用域的数据的作用,而不包括任何业务逻辑。
- 在模块的命名空间中定义控制器,而不是全局性定义。
AngularJS的生命周期
引导阶段
编译阶段
运行时数据绑定阶段
如何将AngularJS与现有的JavaScript和jQuery整合
- 至少从头编写一个使用模式、自定义HTML指令、服务和控制器的AngularJS应用程序。
- 确定你的代码的模型部分。具体的说,试图把模型中增加模型数据的代码分离出来,放到控制器函数中,并且把访问后端模型数据的代码分离出来,放到服务中。
- 确定操作视图中的DOM元素的代码。
- 确定给予其他任务的函数,将其放入服务。
- 把指令和控制器隔离到模块中来组织你的代码。
- 使用依赖注入把服务和模块恰当的连接起来
- 更新HTML模板来使用新的指令。
一个简单的示例
1 var express = require('express'); 2 var app = express(); 3 app.use('/', express.static('./static')). 4 use('/images', express.static( '../images')). 5 use('/lib', express.static( '../lib')); 6 app.listen(80);
1 <!doctype html> 2 <html ng-app="firstApp"> 3 <head> 4 <title>First AngularJS App</title> 5 </head> 6 <body> 7 <div ng-controller="FirstController"> 8 <span>Name:</span> 9 <input type="text" ng-model="first"> 10 <input type="text" ng-model="last"> 11 <button ng-click='updateMessage()'>Message</button> 12 <hr> 13 {{heading + message}} 14 </div> 15 <script src="http://code.angularjs.org/1.4.7/angular.min.js"></script> 16 <script src="/js/first.js"></script> 17 </body> 18 </html>
1 var firstApp = angular.module('firstApp', []); 2 firstApp.controller('FirstController', function($scope) { 3 $scope.first = 'Some'; 4 $scope.last = 'One'; 5 $scope.heading = 'Message: '; 6 $scope.updateMessage = function() { 7 $scope.message = 'Hello ' + $scope.first +' '+ $scope.last + '!'; 8 }; 9 });
AngularJS学习笔记(1) - AngularJS入门相关推荐
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJS学习笔记一:简单入门
阿里云网站的前端是AngularJS实现的. 先下载AngularJS的开发工具包,我下载的angular-1.4.0. 在合适位置引入js文件: <script src="angul ...
- 【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
- 【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
- Hadoop学习笔记(1) ——菜鸟入门
Hadoop学习笔记(1) --菜鸟入门 Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户能够在不了解分布式底层细节的情况下.开发分布式 ...
- iOS学习笔记-地图MapKit入门
代码地址如下: http://www.demodashi.com/demo/11682.html 这篇文章还是翻译自raywenderlich,用Objective-C改写了代码.没有逐字翻译,如有错 ...
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- 【学习笔记】密码学入门(2) 单向散列函数,消息认证码,数字签名,证书
[学习笔记]密码学入门(2) 单向散列函数,消息认证码,数字签名,证书 学习笔记 2 – 混合密码系统 在密码学入门(1)中提到了基本的密码形式,对称密码和公钥密码以及混合密码系统. 这一部分将学习到 ...
- 逐梦旅程学习笔记 DirectX开发入门02:旋转的彩色立方体
本文是 系列笔记DirectX部分的第2篇,上一篇参见 逐梦旅程学习笔记 DirectX开发入门01:应用程序基本框架 这个示例增加了一些实际的内容,首先是绘制一个颜色随机变幻的彩色立方体,其二是显示 ...
最新文章
- Spring IoC 源码系列(三)Spring 事件发布机制原理分析
- 打开和关闭Oracle Flashback
- (转)使用IDEA将普通MAVEN项目转为WEB项目
- java.util.IdentityHashMap.entrySet()方法实例
- NumPy Cookbook 带注释源码 三、掌握 NumPy 常用函数
- python docx 表格_python-docx表格添加和删除数据
- 软件巨头Salesforce带来AutoML杀手TransmogrifAI
- java编写数字时钟_用JAVA写数字时钟
- 在Mac下连接阿里云服务器
- 获取客户端用户真实 IP 地址
- 罗马盘,大力盘,大圣盘等网盘资源搜索免费下载资源教程
- Linux系统-进程概念
- ICT通信运营企业的重建之服务升级(三)----如何打造ICT服务满意度
- 十分钟看懂AlphaGo的核心算法
- win10 U盘无法识别修复方法
- 语音合成TTS主要模型分析
- eechart echarts-wordcloud 生成人物词云图 词云 词少、形状问题、 解决办法
- 细数互联网企业组织架构大调整
- 网易云音乐爬虫 数据可视化分析
- mumu的adb_如何使用网易mumu模拟器调试安卓程序?