AngulaJS——学习笔记一
来源：互联网 发布：淘宝话费充值已下架 编辑：程序博客网 时间：2024/06/03 21:20
1.对比AngularJS与JQuery区别与实用场景?
1.区别： AngularJs 是一种监听数据对象来吃力操作的，根据数据的变化再变动DOM，所以AngularJs是一件驱动的处理机制。 AngularJS 还是一种MVC模式，基于包括一些后台的特性，以及集成了一些比较好的特效； 而 JQUERY是一种操作DOM强而对数据操作比较弱，主要是绑定DOM监听冒泡事件来触发一系列的动作，所以JQUERY可以说是依赖DOM的处理机制。 JQuery只是一个库。 2.试用场景： AngularJS试用与对数据操作(CUID)比较强的场景，目前绝大部分都适合，如普通网站； 而JQUERY比较适合对DOM操作比较强的场景，如游戏图形界面编辑器等； 3.试用思维： JQUERY通常是先设计页面，然后加动态效果，因为jQuery的设计就是为了扩充DOM并在这个简单的前提下疯狂的生长的； 在AngularJS里，必须从头开始就在头脑中思考架构。必须从你想要完成的功能开始，然后设计应用程序，最后来设计视图，而非“我有这么一个DOM片段，我想让他可以实现XXX效果”。 通俗的说就是: JQUERY 先设计页面-----》动态效果------》实现功能 AngularJS 先从功能开始---》应用程序------》设计视图（页面）2. 下载地址：
https://github.com/angular/angular.js/releases
3.推荐编辑神器Sublime Text,附上官网
http://www.sublimetext.com/
注册码：
—– BEGIN LICENSE —–J2TeaM2 User LicenseEA7E-94028245CB0D8F 09100037 7D1056EB A1DDC1A239C102C5 DF8D0BF0 FC3B1A94 4F2892B40AEE61BA 65758D3B 2EED551F A3E3478CC1C0E04E CA4E4541 1FC1A2C1 3F5FB6DBCFDA1551 51B05B5D 2D3C8CFE FA8B4285051750E3 22D1422A 7AE3A8A1 3B4188AC346372DA 37AA8ABA 6EB30E41 781BC81FB5CA66E3 A09DBD3A 3FE85BBD 69893DBD—— END LICENSE ——4.Sublime 安装插件
Sublime安装好了之后，开始安装插件:
1.先安装Package Control使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行，粘贴如下代码：
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())2.Preferences->package Control->先选择 Install package;
再弹出的框中输入AngularJS,选择Angularjs,则会自动安装；
3.再安装converttoutf8
4.配置 按Ctrl+B 自动浏览器启动测试：
1.选择你喜欢的浏览器，右键 > 属性2.把“目标”里的路径复制下来 3. { "cmd": ["C:/Program Files (x86)/Mozilla Firefox/firefox.exe","$file"],"selector": ["text.html"] } 如图把代码里的路径替换成你刚才复制的路径 保存到Sublime Text4.\Packages\User路径下面，名字随便取都行。 5.现在随便打开一个文件 然后按ctrl + b键文件就会自动用你设置的浏览器打开.5.Sublime 选择AngularJS提示风格;
新建一个html文件打开后，选择view->Syntax->AngularJS现在就有了angularJS提示了；6.第一个AngularJS
<!DOCTYPE html><html ng-app><meta charset="UTF-8"><head> <title>haha</title> <script type="text/javascript" src="./plugin/angular.min.js"></script></head><body> <h3>H哈哈</h3> 1.98+2.98={{1.98+2.98|number:0}}</body></html>7. AngularJS 指令：
1. AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 2. ng-app 指令初始化一个 AngularJS 应用程序。 3. ng-init 指令初始化应用程序数据。 4. ng-model 指令把元素值（比如输入域的值）绑定到应用程序 5. {{}} 等价于 ng-bind 从应用程序中获取数据 6. ng-repeat 指令把重复元素 可以用在html元素或者数组，对象等； 举例1：ng-repeat <div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div> 7. 创建自定义的指令 使用 .directive 函数来添加自定义的指令。 要调用自定义指令，HTML 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: 调动自定义方式： 元素名 <runoob-directive></runoob-directive> 属性 <div runoob-directive></div> 类名 <div class="runoob-directive"></div> 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。 注释 <!-- 指令: runoob-directive --> 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。 restrict 值可以是以下几种: E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 举例2： .directive> <body ng-app="myApp"> <div class="runoob-directive"></div> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "C", template : "<h1>自定义指令!</h1>" }; }); </script>8.scope作用域：
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象，有可用的方法和属性。 Scope 可应用在视图和控制器上。9.过滤器：
currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。 举例3：<div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | uppercase }}</p> </div> orderBy排序：默认是升序排列，如果想要降序排列可以在orderBy:'country' :true 或者orderBy:'country'|limitTo:1 <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> <div>10. 服务service :
1.获取当前的地址; $location <div ng-app="myApp" ng-controller="myCtrl"> <p> 当前页面的url:</p> <h3>{{myUrl}}</h3> </div> <p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); </script> 2.$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。 AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。 举例： var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); }); 3.$timeout 服务 用于在指定的毫秒数后调用函数或计算表达式。 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); }); 4.$interval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); });11. 自定义服务：
步骤一：申明 app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); 步骤二：在controller(控制器)调用 app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); }); 步骤一：也可以在filter（过滤器）在过滤器 myFormat 中使用服务 hexafy: app.filter('myFormat',['hexify', function(hexify) { return function(x) { return hexify.myFunc(x); }; }]); 步骤二： 创建服务 hexafy: <ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul> . 获取json AngularJS $http 是一个用于读取web服务器上数据的服务。 $http.get(url) 是用于读取服务器数据的函数 <div ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php") .success(function(response) {$scope.names = response.records;}); }); </script>11.ng-option 使用这个指令 与ng-repeat 的区别：
1. ng-option 创建的下拉框初始化时没有值；而ng-repeat初始化时默认第一个有值 2. ng-repeat 有局限性，选择的值是一个字符串: 使用 ng-options 指令，选择的值是一个对象： 3. ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势： 使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。 举例说明： ng-option : <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; }); </script> ng-repeat: <select> <option ng-repeat="x in names">{{x}}</option> </select>12. 表格显示序列号：显示序号 (index)+1（ index 是从0开始编号）
13. odd even
<table> <tr ng-repeat="x in names"> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td> <td ng-if="$even">{{ x.Name }}</td> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td> <td ng-if="$even">{{ x.Country }}</td> </tr> </table>14 跨域请求 header(“Access-Control-Allow-Origin: *”);
15 依赖注入：
value： Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）： 举例： // 创建 value 对象 "defaultInput" 并传递数据 mainApp.value("defaultInput", 5); factory: factory 是一个函数用于返回值。在 service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值。 service: provider: constant:16：service（） provider（） factory（） 区别：
1.在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了。 2.这三者都创建了相同的底层对象类型。实例化后，他们都创建了一个service，这些对象没有什么功能上的差别。 3.factory() 3.1 Angular里面创建service最简单的方式是使用factory()方法。 3.2 factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。在service方法里面我们可以注入services，比如 $http 和 $q等。 通俗的说factory()是是一个可注入的方法，先创建一个对象，然返回一个服务； 举例： angular.module('myApp.services') .factory('User', function($http) { // injectables go here var backendUrl = "http://localhost:3000"; var service = { // our factory definition user: {}, setName: function(newName) { service.user['name'] = newName; }, setEmail: function(newEmail) { service.user['email'] = newEmail; }, save: function() { return $http.post(backendUrl + '/users', { user: service.user }); } }; return service; }); angular.module('myApp') .controller('MainCtrl', function($scope, User) { $scope.saveUser = User.save; }); 什么时候使用factory()方法？ 在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候，factory()是一个非常不错的选择。 注意：需要使用.config()来配置service的时候不能使用factory()方 4.service() service()通过构造函数的方式让我们创建service，我们可以使用原型模式替代javaScript原始的对象来定义service。 和factory()方法一样我们也可以在函数的定义里面看到服务的注入 angular.module('myApp.services') .service('User', function($http) { // injectables go here var self = this; // Save reference this.user = {}; this.backendUrl = "http://localhost:3000"; this.setName = function(newName) { self.user['name'] = newName; } this.setEmail = function(newEmail) { self.user['email'] = newEmail; } this.save = function() { return $http.post(self.backendUrl + '/users', { user: self.user }) } }); angular.module('myApp') .controller('MainCtrl', function($scope, User) { $scope.saveUser = User.save; }); 什么时候适合使用service()方法 service()方法很适合使用在功能控制比较多的service里面 注意：需要使用.config()来配置service的时候不能使用service()方法 5.provider() provider()是创建service最底层的方式，这也是唯一一个可以使用.config()方法配置创建service的方法 不像上面提到的方法那样，我们在定义的this.$get()方法里面进行依赖注入 angular.module('myApp.services') .provider('User', function() { this.backendUrl = "http://localhost:3000"; this.setBackendUrl = function(newUrl) { if (url) this.backendUrl = newUrl; } this.$get = function($http) { // injectables go here var self = this; var service = { user: {}, setName: function(newName) { service.user['name'] = newName; }, setEmail: function(newEmail) { service.user['email'] = newEmail; }, save: function() { return $http.post(self.backendUrl + '/users', { user: service.user }) } }; return service; } }); 为了给service进行配置，我们可以将provider注入到.config()方法里面 angular.module('myApp') .config(function(UserProvider) { UserProvider.setBackendUrl("http://myApiBackend.com/api"); }) 这样我们就可以和其他方式一样在应用里面使用这个service了 angular.module('myApp') .controller('MainCtrl', function($scope, User) { $scope.saveUser = User.save; }); 什么时候使用provider()方法？ 当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如，我们需要配置services在不同的部署环境里面（开发，演示，生产）使用不同的后端处理的时候就可以使用到了 当我们打算发布开源provider()也是首选创建service的方法，这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。 6.注入service，相当于service定义时的function实例； 注入factory，相当于factory定义时的函数调用入口； 注入provider，相当于注入provider内$get定义的函数实例的调用； 7. value就是一个简单的可注入的值 service是一个可注入的构造器 factory是一个可注入的方法 provider是一个可配置的factory17.参考文献
：StackOverFlow精彩问答赏析：有jQuery背景的开发者如何建立起AngularJS的思维模式
http://www.infoq.com/cn/news/2013/11/how-to-think-angularjs
http://www.runoob.com/angularjs/angularjs-directives.html
0 0
- AngulaJS——学习笔记一
- AngulaJS
- 学习笔记——计算机网络基础【一】
- mini2440学习笔记一 —— 基础
- Python学习手册——笔记一
- Ajax学习笔记(一)——DWR
- IOS学习笔记——UITableView(一)
- JavaScript学习笔记一——数据类型
- JQuery学习笔记(一)——AJax
- 学习笔记（一）——STL
- JAVA学习笔记(一)——开始
- html5 学习笔记——canvas(一)
- JavaScript——学习笔记（一）
- LINQ学习笔记(一)—感受篇
- LINQ学习笔记(一)—感受篇
- STM32学习笔记一—初识STM32
- spring-security3配置—学习笔记《一》
- 深入理解计算机网络—学习笔记一
- lnmp一键安装包配置虚拟主机
- 【Python】|廖雪峰官网学习笔记-HTTP简介
- Python模块
- [bzoj1086][dfs][栈]王室联邦
- iOS开发：国际化之app支持多种语言切换
- AngulaJS——学习笔记一
- 开启自学模式
- Mac OS下安装phpstorm 2016.2.1 的免费激活方法
- 使用Application Loader上传app程序
- [SCOI2005]王室联邦
- 字符编码笔记：ASCII，Unicode和UTF-8
- 微信接收json数据提示invalid charset. please check your request, if include \\uxxxx will create fail!
- 主键与聚集索引的区别
- 第9课：详解 IntelliJ IDEA下的Spark程序开发
