angularjs 是目前比较流行的前端框架之一，angularjs是程序员应该要懂得使用和掌握的一门技术。对自己学习过程记录下来，方便查阅和巩固知识。
1. angularjs引入
官网下载angular文件，在页面引入angular。后面三个非必须。
<script type="text/javascript" src="/src/js/lib/angular/1.5.11/angular.min.js"></script>
<script type="text/javascript" src="/src/js/lib/angular/1.5.11/angular-route.min.js"></script>
<script type="text/javascript" src="/src/js/lib/angular/1.5.11/angular-animate.min.js"></script>
<script type="text/javascript" src="/src/js/plugins/angular-ui-bootstrap-2.5.0/js/ui-bootstrap-tpls-2.5.0.min.js"></script>2. controller
controller由javascript的构造函数定义，主要用于增强angular的scope。
使用controller的情况：
- $scope中对象的初始化
- 给$scope中对象增加一些行为(方法)
var myApp = angular.module('mainApp', []);
myApp.controller('myController', ['$scope', function($scope) {
$scope.name = 'harry';//对象初始化，多个依赖注入的顺序是angular提供的先写，自己的service后写
//在$scope上定义一个行为(函数)
$scope.putName = function(name) {
$scope.name = name;
};
}]);页面如：
<div ng-app="mainApp" ng-controller="myController">
<input ng-model="name">
<button ng-click="putName('chili')">Chili</button>
<button ng-click="putName(name)">Custom spice</button>
</div>controller里创建一个 scope，则是继承上下层结构的 scope。$scope都可以访问比他更高层级controller定义的属性和方法。
3. service
angular的service是作为单例对象在需要的时候被创建。通过三种方式创建
1. factory()
controller的factory方式创建,factory主要用来存储少量的方法或者数据，例如只定义一个方法等
注意：需要使用.config()来配置service的时候不能使用factory()方法
var app = angular.module('mainApp',[]);
app.factory('service1',["$rootScope",function($rootScope) {
var obj = {
user = {},//数据
getName = function(newName){//方法
obj.user['name'] = newName;
}
}
return obj;
//or
return {
user: {},
getName : function(newName) {
user['name'] = newName;
}
};
//or
return {
hasPermission: function(permission) {
if (permission) {
if (typeof permission == "string") {
if (permissionList.indexOf(permission) > -1) {
return true;
}
}
}
return false;
}
};
}]);2. service()
service()通过构造函数的方式让我们创建service,由于service是通过构造函数的方式创造的，且持有创造对象本身，所以当我们在功能比较复杂的情况下，可以通过service()中的方法和数据对controller中变量进行赋值。
var app = angular.module('mainApp',[]);
app.service('service2',["$rootScope",function($rootScope) {
return {
list : function( params ){
console.log(params);
//todo
return params;
},
save: function (formData) {
var promise = a;
return promise;
}
}
}]);3. provider
provider()是创建service最底层的方式，这也是唯一一个可以使用.config()方法配置创建service的方法
provider()不同于service()和factory()，在注入其他的服务的时候不能在function()中注入，即不能app.provider('service3',["$rootScope",function($rootScope) {}在function里注入$rootScope
var app = angular.module('mainApp',[]);
app.provider('service3',["$rootScope",function() {
return {
list: function($rootScope){//在这里注入
}
}
}]);4. scope
scope(作用域)：
是一个存储应用数据模型的对象，作为controller和view之间的粘结剂，为表达式提供了一个执行上下文。
作用域的层级结构对应于 DOM 树结构，一个angular应用有且仅有一个rootScope根作用域，作用域可以监听 表达式 的变化并传播事件。
<!DOCTYPE html>
<html>
<head>
</head>
<script src="script/angular.min.js"></script>
<script>
var app = angular.module('scopeExample', [])
app.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);
</script>
<body>
<div ng-app="scopeExample" ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>
</body>
</html>更多详细参考angular中文网的教程。
5. filter
过滤器用来格式化表达式的值。如{{ 12 | currency }}格式化为$12.00。过滤器还可以带参数{{ expression | filter:argument1:argument2:... }}
在控制器或者服务中使用filter。控制器或者服务中添加以“<过滤器名>Filter”为名的依赖。例如，使用”numberFilter”为依赖时，会相应的注入number过滤器。
自定义过滤器
js代码
var app = angular.module('myReverseFilterApp', [])
app.filter('reverse',function(){
return function(input, uppercase) {
input = input || '';
var out = '';
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
if (uppercase) {
out = out.toUpperCase();
}
return out;
};
})
app.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
$scope.greeting = 'hello';
$scope.filteredGreeting = reverseFilter($scope.greeting);
}]);页面
<!doctype html>
<html ng-app="MyReverseModule">
<head>
<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="greeting" type="text"><br>
未添加过滤器: {{greeting}}<br>
逆置: {{greeting|reverse}}<br>
逆置 + 大写: {{greeting|reverse:true}}<br>
</div>
</body>
</html>6. form
form 可以用来验证数据、保存提交数据
<form novalidate class="simple-form">
Name: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br />
Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>其中 novalidate 属性用于禁用浏览器自带的表单验证功能。
表单也可以用css的自定义样式。ngModel 增加了如下的CSS类： - ng-valid - ng-invalid - ng-pristine - ng-dirty
<form novalidate class="css-form">
Name: <input type="text" ng-model="user.name" required /><br />
邮箱: <input type="email" ng-model="user.email" name="email" required /><br />
<span ng-show="form.email.$error.email">This is not a valid email.</span>
<!--form.email中的email是表单元素的名称-->
性别:
<label><input type="radio" ng-model="user.gender" value="male" />男</label>
<label><input type="radio" ng-model="user.gender" value="female" />女</label><br />
<button ng-click="reset()">重置</button>
<button ng-click="update(user)">保存</button>
</form>
<style type="text/css">
.css-form input.ng-invalid.ng-dirty {//input和ng-invalid之间没有空格。
background-color: #FA787E;
}
.css-form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
</style>自定义验证
<div ng-controller="Controller">
<form name="form" class="css-form" novalidate>
<div>
大小 (整数 0 - 10):
<input type="number" ng-model="size" name="size"
min="0" max="10" integer /><br />
<!--自定义integer指令-->
<span ng-show="form.size.$error.integer">这是无效的数字!</span>
<span ng-show="form.size.$error.min || form.size.$error.max">
值必需在0到10之间!</span>
</div>
</form>
</div>var app = angular.module('form-example1', []);
var INTEGER_REGEXP = /^\-?\d+$/;
app.directive('integer', function() {
return {
require: 'ngModel',
//link函数对自定义元素进行处理。添加事件什么的
//link函数的4个参数固定，第二个参数是元素，第三个是元素上的属性
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (INTEGER_REGEXP.test(viewValue)) {
// 验证通过
ctrl.$setValidity('integer', true);
return viewValue;
} else {
// 验证不通过 返回 undefined (不会有模型更新)
ctrl.$setValidity('integer', false);
return undefined;
}
});
}
};
});7. module
module可以当成一个容器，里面可以包含controller，service，directive等。
Hello World 的模块示例如下
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div>
{{ 'World' | greet }}
</div>
</body>
</html>var myAppModule = angular.module('myApp', []);
//通过创建一个过滤器模块，来达到模块的复用和模块化
myAppModule.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});模块加载和依赖
模块是配置代码块和运行代码块的集合
angular.module('myModule', []).
config(function(injectables) { // provider型注入器
// 这是配置(config)代码块的范例，你可以有任意多个配置代码块
// 配置块中你只能注入Provider类（注意：不是由Provider类生成的实例）以及`constant`
}).
run(function(injectables) { // instance型注入器
// 这是运行(run)代码块的范例，你可以有任意个运行代码块
// 运行块中你只能注入Provider实例（注意：不是Provider类）
});配置代码块 如下
angular.module('myModule', []).
value('a', 123).
factory('a', function() { return 123; }).
directive('directiveName', ...).
filter('filterName', ...);
// 等同于
angular.module('myModule', []).
config(function($provide, $compileProvider, $filterProvider) {
$provide.value('a', 123);
$provide.factory('a', function() { return 123; });
$compileProvider.directive('directiveName', ...);
$filterProvider.register('filterName', ...);
});执行代码块不清楚
使用angular.module("myModule",[])将创建一个名为myModule的模块并重写重名模块。使用angular.module("myModule")则只会获取已有的模块实例。
8. 路由
路由是angular的重要内容。首先需要引入route模块<script src="script/angular-route.min.js"></script>
在需要路由的地方使用ng-view。route路由里的定义的url 对应的html模板，会自动填充到ng-view里
。即项目里的那些html都只是一段div的原因，通常一个项目的主页面的body里会有ng-view标签。然后根据不同的url加载模板到这个标签里展示不同的页面。
route配置的示例
var app = angular.module("color", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/index", {
templateUrl: "index.html",
controller: 'mainController'
})
.when("/list", {
templateUrl: "list.html",
controller: 'listController'
})
.when("/booklist", {
templateUrl: "booklist.html",
controller: 'booklistController'
})
.otherwise('/');
});先到这里。可以参考angular的中文网的教程http://www.angularjs.net.cn/tutorial/。以及慕课网的angular实战视频https://www.imooc.com/learn/156
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
