最近开始自学 angularJs这个前端MVC框架，感觉在前端实现MVC很酷有木有。哈哈哈...

先说说我对前端MVC的一个基本的理解吧（刚开始学习接触得还比较浅显，理解可能会有些不到位，还请各位大神指正）。

首先MVC中M(Model)层，即数据模型层，用于处理业务中的数据信息和存储业务中的状态信息。当Model中的数据改变后，更新后的数据需要显示在View层。在传统的后端实现MVC的框架中，通常是页面提交一个表单或者是Ajax请求给后台的Action，再由Action调用业务处理模块（Service）更改后台Model层中的数据，最后把数据返回到View层并刷新页面。然而在AngularJS中，我们可以在前端实现Model，并通过AngularJs的双向数据绑定，使Model层中的数据实时显示在View层，所有这让我们可以在前端把数据处理完之后直接提交给后台，甚至可以不需要再去刷新页面。所有，这么一来可以减少许多的代码量，大大提高了web应用的开发效率。

下面是我写的第一个AngularJS的示例：

hello.html

  1. <!doctype html>
  2. <html ng-app="hello">
  3. <head>
  4.     <title>hello</title>
  5.     <script type="text/javascript" src="javascripts/angular.min.js"></script>
  6.     <script type="text/javascript" src="javascripts/hello.js"></script>
  7. </head>
  8. <body>
  9.     <div ng-controller="yourname">
  10.         <label>{{you.title}}:</label>
  11.         <input type="text" ng-model="you.name" placeholder="Enter a Name here">
  12.         <hr/>
  13.         <h1>Hello,{{you.name}}</h1>
  14.         <button ng-click="you.say()">say</button>
  15.     </div>
  16. </body>
  17. </html>

hello.js

  1. var myModule = angular.module("hello",[]);
  2. myModule.controller("yourName",['$scope',
  3.     function ($scope) {
  4.         $scope.you = {
  5.             title:'input your name',
  6.             name:'',
  7.             say:function(){
  8.                 alert(this.name);
  9.             }
  10.         };
  11.     }
  12. ]);

还有我想吐槽下...AngularJS的官网大陆竟然上不去。WTF...

luluzero的angularJs学习之路_angularJs示例代码的更多相关文章

  1. 50.AngularJs directive详解及示例代码

    转自:https://www.cnblogs.com/best/tag/Angular/ 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github ...

  2. angularJS 学习之路

    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序.也就是angularjs作用的入口  作用在什么标签或者整个body ...

  3. AngularJS 学习之路（1）

    AngularJS 是一个 JS 框架,适用于以数据操作为主的 SPA (Single Page Application)应用. 不再是 "先查找元素在操作元素",所有操作都以 & ...

  4. IOS学习之路五（代码实现UITableView）

    先展示一下运行结果: 代码实现: 1.先创建一个空项目: 2.创建一个Controller:(TableViewController) 在AppDelegate.h中声明属性: //  AppDele ...

  5. tensorflow学习之路---简单的代码

    import numpyimport tensorflow as tf #自己创建的数据x_data = numpy.random.rand(100).astype(numpy.float32)#创建 ...

  6. AngularJS学习之旅

    开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直 ...

  7. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  8. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  9. angularjs学习总结 详细教程（转载）

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

随机推荐

  1. 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能

    [源码下载] 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能 作者:webabcd 介绍与众不同 windows ...

  2. vim 正则替换

    http://www.cppblog.com/kefeng/archive/2010/10/20/130574.html Vim中的正则表达式功能很强大,如果能自由运用,则可以完成很多难以想象的操作. ...

  3. 基于bootstrap的图片轮播效果展示

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  4. 我见过的几门语言中的hello world

    1.Java public class hello { public static void main(String[] args){ System.out.println("hello w ...

  5. python爬虫——爬取NUS-WIDE数据库图片

    实验室需要NUS-WIDE数据库中的原图,数据集的地址为http://lms.comp.nus.edu.sg/research/NUS-WIDE.htm   由于这个数据只给了每个图片的URL,所以需 ...

  6. If you insist running as root, then set the environment variable RUN_AS_USER=root...

    版权声明:本文为博主原创文章,不经博主允许注明链接即可转载. If you insist running as root, then set theenvironment variable RUN_A ...

  7. vmware mysql报kernel: EXT4-fs (dm-0): Unaligned AIO/DIO on inode 1055943 by mysqld; performance will be poor

    kernel: EXT4-fs (dm-0): Unaligned AIO/DIO on inode 1055943 by mysqld; performance will be poor

  8. c#泛型方法返回null的问题

    c#的泛型方法实现和java实现有点不同,在java中,所有的泛型方法运行时类型必须是引用类型,所以和非泛型一样可以返回null. 但是c#中有点不同,可以同时是值类型和引用类型,而值类型不能赋值nu ...

  9. HTML5&CSS3经典动态表单-2

    上一个demo效果没出来!实际如下 代码没问题.不知道为啥,展示的demo里光标获取焦点的时候不会有如下效果

  10. gulp入坑系列(2)——初试JS代码合并与压缩

    在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/61 ...