angular这个大梗的学习笔记

时间：2021-06-14 08:27:28

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 项目引导的首页面
angular这个大梗的学习笔记

<!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"];
            }
        });
});

angular这个大梗的学习笔记

 
注意点
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>

angular这个大梗的学习笔记

2、templateUrl替换template解决引入大量html结构代码及页面问题；

angular这个大梗的学习笔记注意点：被引入的页面，如下: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>

angular这个大梗的学习笔记　　

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>"
    }
});

效果图如下，
　angular这个大梗的学习笔记　

相关文章