zoukankan      html  css  js  c++  java
  • AngularJS 前端 MVC 的设计与搭建

    代码

    #未引入MVC框架之前的代码
    
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>AngualrJS进阶</title> 
    <link rel="stylesheet" type="text/css" href="css/foundation.css">
    </head>
    <body style="padding:10px;">
    
    </body>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">
    
    </script>
    </html> 
    #引入MVC框架后的代码
    
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>AngualrJS进阶</title> 
    <link rel="stylesheet" type="text/css" href="css/foundation.css">
    </head>
    <body style="padding:10px;" ng-app="app">
    <!--既然这里使用了一个变量名app,绑定AngularJS管理边界,表示AngularJS的作用域,我们就需要在js中声明一个变量,这里采用模块定义方法,注意这里是Module模块,而不是Model模型,即这里的Module不是MVC中的M-->
    <div ng-contrller="myCtrl">
    <!--这里使用我们js中定义的控制器,这个控制器的管理边界就是该div-->
    <input type="text" ng-model="msg">
    <h1>{{msg}}</h1>
    <!--将msg变量绑定到h1标签-->
    </div>
    </body>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">
    angular.module("app",[])
    <!--app是我们定义的模块变量,不是模型,[]是引入AngularJS之前定义的其他模块-->
    .controller("myCtrl",function($scope){
    <!--这里利用controller定义一个控制器变量myCtrl,$scope是我们的应用程序所指向的html的元素,也就是模型Model-->
    $scope.msg="angular";
    });
    <!--这个controller就是一个小型的MVC,controller就是C,$scope就是M,通过$scope.msg将Model双向绑定到View上,
    即将$scope这个Module的msg绑定到h1这个View元素-->
    </script>
    <!--建议将AngularJS文件放入一个单独的JS文件,如下:<script src="js/myctrl.js"></script>,以后就可以在myctrl.js中编写控制代码-->
    </html>
    

      

  • 相关阅读:
    Android 查看通讯录Contacts是否发生变化
    卓尼斯ZT-180评測
    C++中的单例模式
    Android 动画之ScaleAnimation应用具体解释
    java的静态代理
    词性标注
    ubuntu 11.04安装笔记
    机房收费系统学生下机结账小结
    MyBatis入门学习(一)
    !!!!OpenWrt系列教程汇总
  • 原文地址:https://www.cnblogs.com/yedushusheng/p/5524251.html
Copyright © 2011-2022 走看看