AngularJs的初步使用
AngularJS[1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJs程序分为3部分:模板,表现层逻辑,数据(model)。
模板:我们用html,css写的ui视图代码,其中包含AngularJs的指令,表达式,并最终会被AngularJs编译机制编译为附加在dom树上。AngularJs的指令(directive)可以由我们自由扩展。
表现层逻辑:包括应用程序逻辑和行为。用javascript定义作为视图控制器逻辑。在AngularJs作为MVC框架,在控制器中我们无需添加对于dom级的事件监听,这些在AngularJs中已经内置了。在ui节点dom事件发生后AngularJs会自动转到scope上的某个行为(Action)逻辑。
数据:视图对象(viewobject)需要被AngularJs Scope(1.0中作为service出现)引用,可以使任何类型的javascript对象,数组,基本类型,对象。并且AngularJs会自动异步更新模型,即在ui发生改变的时他会自动刷新模型(mode),反之在模型发生改变的时候也会自动刷新ui。在这里我们不需要定义形如getter,setter的一些列方法。
AngularJS 控制器(Controller)
用于控制 AngularJS 应用
1 // controller的使用 2 var myApp = angular.module('myApp',[]); 3 //这里第一个参数controller的名字,后面的参数是所要依赖的模块 4 myApp.controller('GreetingController', ['$scope', function($scope) { 5 $scope.greeting = 'Hola!'; 6 }]);
下面是html页面
1 <!--ng-app指令定义了应用, ng-controller 定义了控制器。 2 ng-model 指令把输入域的值绑定到应用程序变量 greeting 3 --> 4 <html ng-app="myApp"> 5 <head> 6 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 7 </head> 8 <body ng-controller="GreetingController"> 9 <div ng-model="greeting"> 10 Hello {{greeting}}! 11 </div> 12 </body> 13 </html>
这是运行结果
AngularJs指令
通过内置的指令来为应用添加功能。。
下面的是一些AngularJS的内置指令
我这里主要讲怎么去自定义指令
1 var app = angular.module("myApp", []); 2 app.directive("runoobDirective", function() { 3 return { 4 restrict : "A", 5 template : "<h1>自定义指令!</h1>" 6 }; 7 });
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
下面是html代码
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 5 </head> 6 <body ng-app="myApp"> 7 <my-directive></my-directive> 8 <div my-directive></div> 9 <script> 10 var app = angular.module("myApp", []); 11 app.directive("myDirective", function() { 12 return { 13 restrict : "EA", 14 template : "<h1>hello world!</h1>" 15 }; 16 }); 17 </script> 18 </html>
结果大家可以去试下,自定义编写指令,主要用于重复的html代码,比如表单啥编写一个指令,然后使用起来方便。
AngularJs 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
使用路由时,需要导入angular-route.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title></title> 5 </head> 6 <body ng-app='routingDemoApp'> 7 8 <h2>AngularJS 路由应用</h2> 9 <ul> 10 <li><a href="#/">首页</a></li> 11 <li><a href="#/computers">电脑</a></li> 12 <li><a href="#/printers">打印机</a></li> 13 <li><a href="#/blabla">其他</a></li> 14 </ul> 15 16 <div ng-view></div> 17 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 18 <script src="angular-route.js"></script> 19 <script> 20 angular.module('routingDemoApp',['ngRoute']) 21 .config(['$routeProvider', function($routeProvider){ 22 $routeProvider 23 .when('/',{template:'这是首页页面'}) 24 .when('/computers',{template:'这是电脑分类页面'}) 25 .when('/printers',{template:'这是打印机页面'}) 26 .otherwise({redirectTo:'/'}); 27 }]); 28 </script> 29 30 31 </body> 32 </html>
AngularJS 服务(Service)
1 $http({ 2 url:'data.json', 3 method:'GET' 4 }).success(function(data,header,config,status){ 5 //响应成功 6 7 }).error(function(data,header,config,status){ 8 //处理响应失败 9 });
当然我这里只讲了一些最基础的也是最常用的简单例子,大家想要了解还是要去看下视频,因为我是属于后台开发目前设计到一些AngularJs技术,所以说我这篇主要是给自己几天使用AngularJs的一些总结,当然也希望大家能够一起学习交流。