代码

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

　　

AngularJS 前端 MVC 的设计与搭建的更多相关文章

  1. indexedDB bootstrap angularjs 前端 MVC Demo

    前端之MVC应用 1.indexedDB(Model): 数据层,前端浏览器 HTML5 API 面向对象数据库,一般现在用的数据库都是关系型数据库. 那么indexeddb有什么特点呢: 首先,从字 ...

  2. Web前端MVC框架的意义分析

    前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...

  3. 【blade的UI设计】理解前端MVC与分层思想

    前言 最近校招要来了,很多大三的同学一定按捺不住心中的焦躁,其中有期待也有彷徨,或许更多的是些许担忧,最近在开始疯狂的复习了吧 这里小钗有几点建议给各位: ① 不要看得太重,关心则乱,太紧张反而表现不 ...

  4. 前端MVC学习总结——AngularJS验证、过滤器

    前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...

  5. Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...

  6. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

  7. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  8. 前端MVC学习笔记（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  9. 前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...

随机推荐

  1. PTA(Basic Level)1016.部分A+B

    正整数 A 的"*D**A(为 1 位整数)部分"定义为由 A* 中所有 *D**A* 组成的新整数 PA.例如:给定 A=3862767,DA=6,则 A 的"6 部分 ...

  2. List是有序的Set是无序的吗？ List和Set对比

    import java.util.*; /* * List和Set对比 * */ public class ListVSSet { public static void main(String[] a ...

  3. Java代码 简单用于处理和数据库相关的操作

    package util; import org.apache.commons.beanutils.BeanUtils; import java.lang.reflect.InvocationTarg ...

  4. 与C++开启新路途

    1.我与C的过去 学习C语言大概是从18年8月开始,一直到19年3月.我完成了对C的基本认识和学习,也顺利通过了二级C计算机的考试.不过当你开始深入于C的世界时,你会发现学习的基础好像略有浅薄.宏的世 ...

  5. AppCan全局搜索

    Ctrl + H,在项目中全局搜索英文和中文

  6. vscode 插件 配置

    第一页 第二页 第三页 settings.json配置 { "editor.fontSize": 20, "files.autoSave": "off ...

  7. 十大经典排序算法(Python,Java实现)

    参照:https://www.cnblogs.com/wuxinyan/p/8615127.html https://www.cnblogs.com/onepixel/articles/7674659 ...

  8. Mac下的Web性能压力测试工具:ab(ApacheBench)

    Web开发,少不了的就是压力测试,它是评估一个产品是否合格上线的基本标准. ab是一种用于测试Apache超文本传输协议(HTTP)服务器的工具.apache自带ab工具,可以测试Apache.IIS ...

  9. yii的rules验证规则

    图片验证 public function rules() { return [ [['id'], 'integer'], [['id'], 'required'], [['files'], 'file ...

  10. CSS-百分百布局

    1.照片随着大小变化: 这里面重点就是每个包裹盒子是25%,图片是100%显示: <div class="box2"> <p> //这里都是4个: < ...