最近开始自学 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

<!doctype html>

<html ng-app="hello">

<head>

    <title>hello</title>

    <script type="text/javascript" src="javascripts/angular.min.js"></script>

    <script type="text/javascript" src="javascripts/hello.js"></script>

</head>

<body>

    <div ng-controller="yourname">

        <label>{{you.title}}:</label>

        <input type="text" ng-model="you.name" placeholder="Enter a Name here">

        <hr/>

        <h1>Hello,{{you.name}}</h1>

        <button ng-click="you.say()">say</button>

    </div>

</body>

</html>

hello.js

var myModule = angular.module("hello",[]);

myModule.controller("yourName",['$scope',

    function ($scope) {

        $scope.you = {

            title:'input your name',

            name:'',

            say:function(){

                alert(this.name);

            }

        };

    }

]);

还有我想吐槽下...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. 使用HttpRequester模拟发送及接收Json请求

    1.开发人员在火狐浏览器里经常使用的工具有Firebug,httprequester,restclient......火狐浏览器有一些强大的插件供开发人员使用!需要的可以在附加组件中扩展. 2.htt ...

  2. oracle触发器类型

    http://www.cnblogs.com/roucheng/p/3506033.html 触发器是许多关系数据库系统都提供的一项技术.在ORACLE系统里,触发器类似过程和函数,都有声明,执行和异 ...

  3. windbg学习进阶之——dump分析常用命令收集

    #重要说明 (1) windbg命令分为标准命令,元命令和扩展命令. 标准命令提供最基本的调试功能,不区分大小写.如:bp  g  dt  dv  k等 元命令提供标准命令没有提供的功能,也内建在调试 ...

  4. 优化win2d实现的萤火虫粒子效果

    前几天我发了个技术博客,告诉大家怎样用Win2D 画萤火虫动画 . 那种绘制萤火虫的方式虽然画质高,但是性能不好,萤火虫数量超过50就可以感受到帧数下降. 我今天想到了一种牺牲画质提升性能的绘制方式, ...

  5. 与众不同 windows phone (44) - 8.0 位置和地图

    [源码下载] 与众不同 windows phone (44) - 8.0 位置和地图 作者:webabcd 介绍与众不同 windows phone 8.0 之 位置和地图 位置(GPS) - Loc ...

  6. AC自动机---Searching the String

    ZOJ   3228 题目网址:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=16401 Description Little ...

  7. php正规则表达式的语法

    界定符的三种书写方式: regexpal工具(正规则表达调试工具): 可以实时显示效果出来. 原子: 可见原子,即uincode编码表中的某个字符 不可见原子: 为了避免编码问题导致匹配不正确,要把文 ...

  8. 如何实现两个Activity 之间如何通讯

    <转> 今天主要学习了Activity 组件,在这里作一下总结 1,学习如何创建Activity 创建 Activity 要点: (1) 一个Activity就是一个类,并且这个类要继承A ...

  9. ASP.NET页面动态添加js脚本

    有时我们需要生成自己的JavaScript代码并在运行时动态添加到页面,接下来我们来看一下如何将生成的JavaScript代码动态添加到ASP.NET页面. 为了添加脚本,要将自定义的脚本在一个字符串 ...

  10. ABAP内表(internal table)有关的系统变量

    SY-TABIX – 内表当前行的索引号.SY-TABIX 的值可以被以下命令修改,但是只适用于索引表(index table).对于哈希表(Hashed table),这个系统变量的值为空或0. A ...