边玩边学边学边忘之AngularJs
Angular内置指令：
1-添加管理边界：ng-app
§2-用于input：ng-model(注意：这里是适合绑定动态的数据)
3-初始化数据：ng-init
4-数据绑定、可存放一个变量：{{}} 、ng-bind
总结：ng-bind和{{}}区别
ng-bind在angularjs没有加载的时候不显示
{{}}在angularjs没加载之前会显示{{}}
5-重复渲染：ng-repeat
track by $index给每个重复的元素添加下标 确保他的唯一性
6-ng-if和ng-show的区别：
如果为false ng-if将不会渲染
ng-show先渲染在判断是否显示与隐藏
注意：如果涉及到src或者href属性 angular标记{{}}src属性不正常，浏览器会把URL文本{{}}代替angular的{{}} 解决问题是使用ngsrc
Angular控制器：
先添加注入管理边界，
就可以实现控制器ng-controller了
1-控制器添加制动控制区域
2-每个控制器必须对应实现
3-控制器参数问题：
参数1：控制器名称
参数2：回调函数（$scope）
$scope:固定参数，承上启下
以下是相关附件代码:
<div> {{msg}} </div> <button ng-click="getNum()">按钮</button> <script> var app=angular.module("app",[]); app.controller("mainCtrl",function($scope){ $scope.msg="我是控制器"; $scope.getNum=function(){ alert("ojbk") } }) ; </script>
注意：如果先给这个页面的主控制器赋值 再给局部的控制器赋值 那么局部控制器的赋值会把主控制器的值覆盖。
控制器与控制器之间的交互可以直接使用$rootscope 也可以使用广播和服务 一般不建议用前者 更推荐后者。
angular事件：
ng-click:点击事件具体事件用到的可以看看文档
*在用到的时候不要忘记给事件方法加括号，在调取ng的方法的时候记得所有的都要用$scope调取，这已经不是第一次错误了。。
angular内置服务：
angular内置服务共分为4种
1-http
2-localtion
3-filter
4-timer
1- $http
var app =angular.module("app",[]);//先依赖注入一个模块 app.controller("MainCtrl",["$scope","$http",function($scope,$http){ $http({ method:"get", url:".........." }).success(function(data){ console.log(data); }) }]) //以上这段请求就是传说中原生ajax那种请求
注意：angular1.5以上版本已经废弃.success和.error方法了，需先调用then(function successCallback(){},function(errorcallback){})
先看个栗子(一个大神讲给我的 很重要哦)：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="b" ng-controller="myCtrl">
<div></div>
<script>
//a模块
var a = angular.module('a', []);
a.service('jsq', function() {
this.add=function (x,y) {
return x+y;
}
});
//b模块
var b = angular.module('b', []);
b.controller('myCtrl', function($scope) {
var res=xxxx(2,3);//我想用a模块中jsq服务中的add方法，怎么办
alert(res)
});
</script>
</body>
</html>
//其实注入方法很简单 单独写个控制器先模块注入，再组件注入搞定
2-location
location方法身上挂载的方法跟原生的location差不多
location.absUrl()方法：获取当前url
*用的时候记得不要忘了$
3-filter
filter过滤器 ：输入过滤器可通过一个管道字符（|）和一个过来不起添加到指令中，
eg:{{ 12 |currency }} 可转化成美元{{ 12 |currency :"RMB ￥" }}
{{1490161945000| data:"yyyy-MM-dd HH:mm:ss"}}
*如果要在控制器声明变量，要用$scope声明
4-timer
在angular中 settimeout和setinterval直接注入的时候把set去掉就好
注意点：他们调取cancel这个方法的时候定时器会被清理掉
下面是栗子：
var app = angular.module("app",[]); app.controller("MainCtrl",["$scope","$timeout","$interval",function ($scope,$timeout,$interval) { var timer = $timeout(function () { console.log("222"); },2000); $timeout.cancel(timer); var i = 0; var timer1 = $interval(function () { i++; console.log(i); },1000) $interval.cancel(timer1); }]);
这个栗子的执行结果是啥都没有，原因上文解释过。
*控制器必须要用方括号的形式写，否则会报错。
angular内置服务共分为5种
1.value
定义可以变得简单数值或对象
2.constant
定义不可以变的简单数值或对象
3.factory
定义具有可操作性行内容
4.service
定义具有可操作性行内容
5.provider
定义具有可操作性行内容
注意：factory、service、prvider功能是一样的，不同的是，实现的方案不同，
所以大家在使用的时候 ，可以按照自己习惯的方式使用
1.value
自定义指令value通常在使用的是时候做一些数据初始化
调取的时候通常用key:value的形式
在模块注入之后通常要用app调取一下value，通常在控制器里面可以直接注入key
var app = angular.module("app",[]); app.value("username","iwen"); app.value("obj",{ name:"iwen", age:20 }); app.value("username","你好么"); // 注意：自定义的任何内容，都不要去添加$符号 app.controller("MainCtrl",["$scope","username","obj",function ($scope,username,obj) { $scope.msg = username; $scope.name = obj.name; console.log(obj); }]);
2-constant
他和value的用法基本一致的，唯一不同点就是他的值定义了以后不可改变。
3-factory
调用形式任然是key:回调函数的形式
var app = angular.module("app",[]); //参数1：key //参数2：回调函数 app.factory("msg",function () { return{ hello:"欢迎来到不知道哪里" } }); //增加函数体 app.factory("myInfo",function () { function getInfo() { return{ name:"iwem", age:20 } } return{ getInfo:getInfo() } }); //逻辑判断 app.factory("age",function () { function getAge() { return{ age:29 } } return{ age:getAge().age > 30 ? getAge().age : "不合理" } }); //传递参数 app.factory("info",function () { function getInfo(info) { if(info){ return info; } return "请传递参数" } return { getInfo:getInfo }; }); //服务于服务之间可以互相注入 app.factory("it",["msg",function (msg) { return { itmsg:msg } }]); app.controller("MainCtrl",["$scope","msg","myInfo","age","info","it",function ($scope,msg,myInfo,age,info,it) { $scope.msg = msg.hello; console.info(myInfo.getInfo); console.log(age.age); console.log(info.getInfo("我是info")); console.log(it.itmsg.hello); }]);
4-service
注：所有的服务都是全局的，哪里使用都可以注入使用。类似于单例模式
var app = angular.module("app",[]); //service的创建 app.service("myservice",function () { var obj = { name:"iwen" }; return obj; }); app.service("info",function () { this.getInfo = function () { return "iwen"; }; return this.getInfo(); }); //service用來做共享 /* * 所有的服务都是全局的！！ * * */ app.controller("MainCtrl",["$scope","myservice","info",function ($scope,myservice,info) { console.log(myservice); console.log(info.getInfo()); }]);
再举一个模块注入的栗子~
<div ng-controller="fa1Ctrl">
</div>
<div ng-controller="fa2Ctrl"></div>
var app = angular.module("app",[]);
app.service("getData",function(){
return [];
})
app.controller("MainCtrl",["$scope",function($scope){
}])
app.controller("fa1Ctrl",["$scope","getData",function($scope,ser){
var msg=["apple","banana"];
ser.push(msg);
}])
app.controller("fa2Ctrl",["$scope","getData",function($scope,ser){
console.log(getData[0]);
}])
5-provide
噗哈哈先总结到这里下一期继续写个分割线更文
Angular路由：
1-在注入之前 必须要引入相关路由文件 必须要先引进angular.js 再引入angular-route.min.js文件
2-在controller里面必须单独注入ngroute
3-页面的ng-view里面是各个页面的内容
4-配置
- ngRoute是一个独立的模块，所以这要用更添加依赖的形式，添加进来
- 再通过模块调取config([])
- 通过。otherwise方法配置默认显示的页面
var app=angular.module("app",[ngroute]); app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/index",{ tempelateUrl:"view/index.html", controller:"indexCtrl" }) .when("/index1",{ tempelateUrl:"view/index1.html", controller:"index1Ctrl" }) .otherwise({ redirectTo:"/index" }) }])
注意：angularjs路由不支持跳转二级页面，只有angular1会存在这个版本，2以上的路由都不会存在这样的问题，这样的话可以搭配ui-router使用
关于ui-router的使用方法 了解一下，传送门https://blog.csdn.net/sourcecode_poet/article/details/53509834
