zoukankan      html  css  js  c++  java
  • 2.AngularJS MVC

    AngularJs的MVC全部借助于$scope(作用域)实现

    1.ng指令

    <!doctype html>
    <html ng-app>
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <div ng-controller="CommonController">
                <div ng-controller="Controller1">
                    <p>{{greeting.text}},Angular</p>
                    <button ng-click="test1()">test1</button>
                </div>
                <div ng-controller="Controller2">
                    <p>{{greeting.text}},Angular</p>
                    <button ng-click="test2()">test2</button>
                    <button ng-click="commonFn()">通用</button>
                </div>
            </div>
        </body>
        <script src="js/angular-1.3.0.js"></script>
        <script src="MVC3.js"></script>
    </html>
    

    通过$scope获取对象

    function CommonController($scope){
    	$scope.commonFn=function(){
        	alert("这里是通用功能!");
        };
    }
    
    function Controller1($scope) {
        $scope.greeting = {
            text: 'Hello1'
        };
        $scope.test1=function(){
        	alert("test1");
        };
    }
    
    function Controller2($scope) {
        $scope.greeting = {
            text: 'Hello2'
        };
        $scope.test2=function(){
        	alert("test2");
        }
    }
    

      

     2.实现Model

    <!doctype html>
    <html ng-app>
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <div>
                <input ng-model="greeting.text"/>
                <p>{{greeting.text}},Angular</p>
            </div>
        </body>
        <script src="js/angular-1.3.0.js"></script>
    </html>
    

    1.ng-app规定了作用域为AngularJs解析 ng-model可以形成greeting.text模型对象

    3.实现view  

    <!doctype html>
    <html ng-app="MyModule">
    	<head>
    		<meta charset="utf-8">
    	</head>
    	<body>
    		<hello></hello>
    	</body>
    	<script src="js/angular-1.3.0.js"></script>
    	<script src="HelloAngular_Directive.js"></script>
    </html>
    

    通过Directive实现View的复用 <hello></hello>

    var myModule = angular.module("MyModule", []);
    myModule.directive("hello", function() {
        return {
            restrict: 'E',
            template: '<div>Hi everyone!</div>',
            replace: true
        }
    });
    

    $scope  

    • $scope是一个POJP(Plain Old JavaScript Object)
    • $scope提供了一些工具方法$watch $apply
    • $scope是表达式的执行环境(作用域)
    • $scope是一个树型结构,与DOM标签平行
    • 子$scope对象会继承父$scope上的属性和方法
    • 每一个Angular应用只有一个根$scope对象(一般位于ng-app上)
    • $scope可以传播事件,类似DOM事件,可以向上也可以向下
    • $scope不仅是MVC的基础,也是后面实现双向数据绑定的基础 
    • 可以通过angular.element($0).scope()
    • 调试插件:Inspect Angular Scope(chrome)
    • 生命周期:Creation-Watcher registration-Model mutation-Mutation observation-Scope destruction
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
  • 原文地址:https://www.cnblogs.com/weizaiyes/p/6024716.html
Copyright © 2011-2022 走看看