【Angular】——Angular mvc

之前学习的简单总结——

没有找到AngularJs关于mvc太多的资料，只有简单的实例初步的了解一下AngularJS中的mvc，所以自己对这一块目前只停留在简单使用上。

首先看一下html页面的代码：

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

页面中引用的HelloAngular_MVC.js代码：

var mvcModule=angular.module("mvcHTMLModule",[])//定义模块名为mvcHTMLModule//在该模块中添加controller
var mvcModule=angular.module("mvcHTMLModule",[])//定义模块名为mvcHTMLModule
//在该模块中添加controller
mvcModule.controller("CommonController",function ($scope){
    $scope.commonFn=function(){
        alert("这里是通用功能！");
    };
})
mvcModule.controller("Controller1",function ($scope) {
    $scope.greeting = {
        text: 'Hello1'
    };
    $scope.test1=function(){
        alert("test1");
    };
})
mvcModule.controller("Controller2",function($scope) {
    $scope.greeting = {
        text: 'Hello2'
    };
    $scope.test2=function(){
        alert("test2");
    }
})

指令认识：

ng-app：指令告诉Angular 应该管理页面中的哪一块。本实例中Angular管理整个html页。默认可以不赋值，本实例中在js中定义了自己的模块mvcHTMLModule，可以在页面中使用。

ng-controller：可以指定页面中某一块元素使用的controller，本实例中在模块中定义了三个controller，在页面上使用的范围不同，只要在controller指定的范围内容就可以使用controller中定义的属性和方法。

ng-model：将输入域的值与在对应范围内的controller中$scope创建的变量绑定。（输入域一般指：input、text、select等）

ng-click：定义点击事件，本实例中调用的是在不同controller中的$scope定义的方法。

作用范围示意图：

效果示意图：

分析：ng-model虽然都绑定的是greeting.text，但是显示在页面上的是不同的值，因为绑定的是不同Controller中的属性。

小结：

MVC是Angular四大核心之一，目前对Angular中mvc 的认识仅限于几个指令，后续学习中再深入。

初步接触AngularJS实现自己写俩个实现一样功能的demo，使用Angularjs使用ng-model指令就可以了，如果用jquery需要手动的写很多代码。

类似ng-model这样的就是指令，Angular中自带了很多指令，我们也可以自己定义指令来完成我们指定的前台功能，后续博客中简单的认识一下指令。

原文链接：https://www.f2er.com/angularjs/146934.html

【Angular】——Angular mvc

猜你在找的Angularjs相关文章