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