#基础属性
ng-app = data-ng-app : 定义angular应用ng-controller : 定义angular控制器与ng-app属于同一级别
ng-init = data-ng-init : 用于定义初始化的数据
ng-model = data-ng-model : 定义表单域绑定数据
@有四种状态(一般用于表单验证)
invalid:输入的值合法则为true
dirty:如果值改变则为true
touched:如果通过触屏点击则为true
error:如果值不合法则为true
@css类
ng-empty:
ng-not-empty:
ng-touched:控间已经失去焦点
ng-untouched:控件未失去焦点
ng-valid: 通过验证
ng-invalid:验证失败
ng-dirty:
ng-pending:
ng-pristine:控件为初始状态
ng-bind = data-ng-bind : 定义html绑定数据(与{{}}双括号作用一致)
ng-repeat = data-ng-repeat : 定义重复一个html元素 ng-repeat="x in xs"
ng-show: 定义显示数据(和ng-hide类似)
ng-click: 定义点击事件
ng-disabled:将布尔值设置为false
ng-hide:设置元素的可见性(和ng-view类似)
#angular 模块
var app = angular.module('myapp',[]); //定义模块
app.controller('myCtrl',function($scope){
$scope.firstName = "fanciful";
});
#自定义指令(使用.directive函数)
var app = angular.module('myapp',[]);
App.directive('runDirective',function(){ //驼峰会自动用-分割
return {template:"<h2>自定义指令</h2>"};
});
//用法(四种方式)
<run-directive></run-directive> //元素方式
<div run-directive></div>. //属性方式
<div class="run-directive"></div>//属性方式(
return {
restrict : "A", //只能属性使用
template : "<h1>自定义指令!</h1>"
}); //指令返回需要增加一个restrict属性
<!-- runDirective: run-directive --> //注解方式
return {
restrict : "M", //只能注解使用
replace : true,
template : "<h1>自定义指令!</h1>"
});
//restrict属性的用法
E:作为元素使用(element)
A:作为属性使用(attribute)
C:作为类名使用(class)
M:作为注解使用
#angular应用的组成
View(视图):即html
Model(模型):当前视图中可用的数据
Controller(控制器):即javascript函数
#Scope是模型(scope是对象有属性方法)
$rootScope:对应应用的根作用域
#angular控制器
#angular过滤器
过滤器使用管道符 | 添加中表达式何指令中
默认过滤器:
currency:格式化数字为货币格式
filter: 从数组项中选择一个子集
lowercase:格式化字符串为小写
orderBy:根据某个表达式排列数组
Uppercase:格式化字符串为大写
#angular服务(服务通过参数形式传入controller)
$location:
$http: 请求服务器地址
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
$timeout:对应window.setTimeout 函数
$interval:对应window.setInterval函数
//创建自定义服务
app.service('server',function(){
This.myFun = function(x){
return x;
}
});
#angular事件
ng-click
#angular模块
#angular api
angular.lowercase() //转换字符串为小写
angular.uppercase() //转换字符串为大写
angular.isString() //判断给定的对象是否是字符串
angular.isNumber() //判断给定的对象是否为数字
#angular 包含
ng-include: 包含某个地址 <div ng-include="'demo.html'"></div>
#angular 依赖注入 (总结来说就是注入的这些对象函数都是用于在控制器中调用)
value:是一个javascript对象用于向控制器传递值
var myApp = angular.module("myApp",[]);
myApp.value("defaultInput",5);
myApp.controller("myController",function($scope,defaultInput){});//将defaultInput注入到controller
factory:是一个函数,可用用于返回值
myApp.factory("MathService",function(){
var factory = {};
factory.mult = function(a,b){
return a*b;
}
return factory;
});
service:可用值service中注入 factory
myApp.service("CalcService",function(MathService){
This.square = function(a){
return MathService.mult(a,a);
}
});
provider:可用通过provider创建service factory 等
myApp.config(function($provide){
$provide.provider('MathService',function(){
this.$get=function(){
var factory = {};
factory.mult = function(a,b){
return a*b;
}
return factory;
};
});
});
constant:常量,用来做配置阶段传递参数
myApp.constant("configParam","constant value");
#angular 路由(必须依赖于ngRoute模块)
angular.module('routeApp',['ngRoute']);
routeApp.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{template:'这是首页'})
.when('/print',{template:'这是打印页面'})
.otherwise({redirectTo:'/'});
}]);
//路由对象设置规则
$routeProvider.when(url, {
template: string, //会在ng-show中展示的内容
templateUrl: string, //获取服务队的模版内容到html显示
controller: string, function 或 array,//中当前模版上执行的controller函数
controllerAs: string, //为controller指定别名
redirectTo: string, function, //重定向的地址
resolve: object<key, function> //指定当前controller所依赖的其他模块
});
总结:笔记较为基础,但是对整个angular 对架构模块有了个大概的认识,重要还是在于应用实战。