angular定义一个模块(module)及控制器(controller)的局部声明方法:
var app=angular.module("Myapp",[]); myapp.controller("myctrl",['$scope','$window',function($scope,$window){ $scope.name="欢迎来到 Angular 的世界!"; $scope.value="100"; //$window.alert(8) }])
var app=angular.module("Myapp",[]);
1、红色字的 Myapp是在页面中ng-app="Myapp"调用的(一个页面中只能出现一次<html ng-app="Myapp">表示这个页面从此处开始,里面的东西都将由angular来管理)
2、[] 这个是我们要调用另外一个模块时,导入模块的地方,如果没用到其它模块,这里则为空
示例如下:Myapp
var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters', 'bookStoreServices', 'bookStoreDirectives','Myapp' ]);
3、$scope,$window 表示向控制器中注入这两个参数,并依赖这两个变量;
myapp.controller("myctrl",['$scope','$window',function($scope,$window){
}])
Angular 使用参数详解>>.
UIRoute1.html 项目引导的首页面
<!doctype html> <html ng-app="MyUIRoute"> <head> <meta charset="utf-8"> <script src="js/angular-1.3.0.js"></script> <script src="js/angular-animate.js"></script> <script src="js/angular-ui-router.js"></script> <script src="UIRoute1.js"></script> </head> <body> <div ui-view></div> <a ui-sref="state1">State 1</a> <a ui-sref="state2">State 2</a> </body> </html>
var myUIRoute = angular.module('MyUIRoute', ['ui.router', 'ngAnimate']); myUIRoute.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/state1");//此处设置默认打开页路径 $stateProvider .state('state1', {//此处'state1'为打开的这个默认页面state1.html的页面名称, //方便通过a标签<a ui-sref="state1.list">Show List</a>访问子页面 url: "/state1",//此处为设置的页面访问路径与$urlRouterProvider.otherwise("/state1")默认打开页路径对应 //即在浏览器中输入#/state1则打开state1.html页面,此为默认打开页,所以一进来就自动加了#/state1 templateUrl: "tpls/state1.html" }) .state('state1.list', {//当通过父页面state1点击a标签<a ui-sref="state1.list">Show List</a>访问子页面时, //此处即为设置a标签访问的页面名称 url: "/list",//此处为设置的页面访问路径(父级必须存在,才能有效,要不然在地址栏加#/list会无效) templateUrl: "tpls/state1.list.html", controller: function($scope) {//此处为设置state1.list.html页面受控哪个控制器 $scope.items = ["A", "List", "Of", "Items"]; } }) .state('state2', {//此处'state2'为打开的这个页面state2.html的页面名称, //方便通过a标签<a ui-sref="state2">State 2</a>访问页面 url: "/state2",//此处为设置的页面访问路径,切换到这个页面时, //会自动在地址栏添加,不写则不会有,也可以开页面但是,没办法保存访问地址 templateUrl: "tpls/state2.html" }) .state('state2.list', { url: "/list", templateUrl: "tpls/state2.list.html", controller: function($scope) { $scope.things = ["A", "Set", "Of", "Things"]; } }); });
注意点
1、打开页面时如果没在js中设置views视图,则默认在点击的那个页面中的匿名view(如:ui-view)中打开,如果不是,则要设置views中的视图名称,如果要替换当前页,则直接用本页打开时采用的视图名
2、在哪个页面中打开的页面,a标签中的路径一定要写到完整,从最父级写到本页 ,
如:<a ui-sref="index.usermng.highendusers" class="list-group-item">高端用户</a>
因为在app.js中与state中的参数,对应
$stateProvider.state('index.usermng.highendusers', { url: '/highendusers', templateUrl: 'tpls3/highendusers.html' })
3、ui-router中关于内嵌ui-view
首先有个启动页
<!doctype html> <html ng-app="routerApp"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/angular-1.3.0.js"></script> <script src="js/angular-animate.js"></script> <script src="js/angular-ui-router.js"></script> <script src="UIRoute3.js"></script> </head> <body> <div ui-view></div> </body> </html>
假如在启动页面中的一级子页面index.html中有二级ui-view,
<div class="container">
<div ui-view="topbar"></div>
<div ui-view="main"></div>
</div>
则可通过@符号来衔接:
比如一级子页面index.html,state第一个路由命名参数命名为index,
则其本身中放的视图ui-view要用本身子页面的视图名称@自身页面被命名的路由名称
如下图代码
var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/index'); $stateProvider .state('index', { url: '/index', views: { '': { templateUrl: 'tpls3/index.html' }, 'topbar@index': { templateUrl: 'tpls3/topbar.html' }, 'main@index': { templateUrl: 'tpls3/home.html' } } }) .state('index.usermng', { url: '/usermng', views: { 'main@index': { templateUrl: 'tpls3/usermng.html', controller: function($scope, $state) { $scope.addUserType = function() { $state.go("index.usermng.addusertype"); } } } } }) .state('index.usermng.highendusers', { url: '/highendusers', templateUrl: 'tpls3/highendusers.html' }) .state('index.usermng.normalusers', { url: '/normalusers', templateUrl: 'tpls3/normalusers.html' }) .state('index.usermng.lowusers', { url: '/lowusers', templateUrl: 'tpls3/lowusers.html' }) .state('index.usermng.addusertype', { url: '/addusertype', templateUrl: 'tpls3/addusertypeform.html', controller: function($scope, $state) { $scope.backToPrevious = function() { window.history.back(); } } }) .state('index.permission', { url: '/permission', views: { 'main@index': { template: '这里是权限管理' } } }) .state('index.report', { url: '/report', views: { 'main@index': { template: '这里是报表管理' } } }) .state('index.settings', { url: '/settings', views: { 'main@index': { template: '这里是系统设置' } } }) });
angular指令>>>>.
var appModule=angular.module('AppModule',[]);appModule.directive('hello',function(){ return { restrict:'EACM', template:'<div>88</div>', replace:true } })
1、restrict匹配模式 restrict:'EACM', 4个参数含义:
E:元素方式
<hello>这是测试angular.js指令标签的内容</hello>
A:属性方式
<div hello>这是测试angular.js指令标签的内容</div>
C:样式类方式
<div class="hello">这是测试angular.js指令标签的内容</div>
M:注释方式,此处directive:hellow左右必须要加空格才行
<!-- directive:hellow -->
<div>这是测试angular.js指令标签的内容</div>
2、templateUrl替换template解决引入大量html结构代码及页面问题; 注意点:被引入的页面,如下:hello.html页面代码中一定要有一个包裹所有代码的父级元素,angular在插入到相应指令代码中时,会把这个父级div的所有属性,(如class id 及其他的属性),给组合到指令代码<hello></hello>的这个标签中;
<div id="banner"> <div id="focus" class="focus" hello > </div> </div>
var directive=angular.module('mydirective',[]);
directive.directive('hello',function(){
return { restrict:"AE", templateUrl: 'banner.html', replace:true, link:function(scope,element,attrs){ console.log(element); console.log(scope); console.log(attrs); } } })
要被插入的 hello.html 页面代码
<div> //这为包裹所有元素的父级div <div class="bd"> <ul> <li> <a href="javascript:void(0);"><img src="data:images/640-350.jpg" /></a> </li> <li> <a href="javascript:void(0);"><img src="data:images/640-350.jpg" /></a> </li> <li> <a href="javascript:void(0);"><img src="data:images/640-350.jpg" /></a> </li> <li> <a href="javascript:void(0);"><img src="data:images/640-350.jpg" /></a> </li> </ul> </div> <div class="hd"> <ul id="hd-ul"></ul> </div> </div>
3、angular内置方法$templateCache实现模版缓存共用
var myModule = angular.module("MyModule", []); //注射器加载完所有模块时,run方法会执行一次 myModule.run(function($templateCache){ $templateCache.put("key_name","<div>Hello everyone!!!!!!</div>");//$templateCache.put把右边的模版内容缓存起来 }); myModule.directive("hello", function($templateCache) { return { restrict: 'AECM', template: $templateCache.get("key_name"),//通过$templateCache.get调用$templateCache缓存的模版 replace: true } });
$templateCache.put('key_name','html结构') 中的参数,就相当于key value 的概念吧,第一部分是名称,第二部分写内容,要用到的时候写名称就行
$templateCache.get('key_name')
4.transclude实现指令中template的HTML结构嵌套(嵌套内容为,设置的指令元素中,页面预留的html结构)
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <hello> <div>这里是指令内部的内容。</div> <div>这里是指令内部的内容。</div> <div>这里是指令内部的内容。</div> </hello> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="transclude.js"></script> </html>
var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict:"AE", transclude:true, template:"<div>Hello everyone!<div ng-transclude></div>omo</div>" } });
效果图如下,