最近开始自学 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. STL or Force --- CSU 1553: Good subsequence

    Good subsequence Problem's Link:   http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1553 Mean: 给你一个长 ...

  2. P6 Professional Installation and Configuration Guide (Microsoft SQL Server Database) 16 R1

    P6 Professional Installation and Configuration Guide (Microsoft SQL Server Database) 16 R1       May ...

  3. 解决PL/SQL查询结果乱码的问题

    首选查询oracle服务端的编码,然后将客户端NLS_LANG设置成和Oralce服务端一样的编码即可. 1.检查服务器编码: 执行SQL语法: select * from v$nls_paramet ...

  4. 阿里云主机上安装jdk

    今天继续安装jdk到阿里云服务上,大家要看一下阿里云是32位还是64位的,如果是32位下载32位的包,如果是64位的下载64位的包 我的就是64位的,开始我还不知道是怎么区分32/64位的,原来X64 ...

  5. emulator: ERROR: x86 emulation currently requires hardware acceleration!

    emulator: ERROR: x86 emulation currently requires hardware acceleration!Please ensure Intel  is prop ...

  6. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  7. SharePoint 2013 "通知我"功能简介

    功能简介 "通知我"主要是在列表或者文档库里面的项目,有添加/删除/修改等操作,发送邮件通知设置的用户的功能:可以针对列表或者文档库设置通知,也可以针对单一项目设置通知功能,是Sh ...

  8. 在Android开发中使用Ant 三：批量打包

    批量打包最常用到的地方是进行产品推广时,为每个渠道打一个包.上一篇随笔中,介绍了怎样进行一次完整的打包,批量打包只要在此基础上做一次循环即可. 在打包之前要做两个准备工作,一个是读取渠道,一个是修改存 ...

  9. Objective-c 基础框架（初学者－总结）

    一个框架其实就是一个软件包,它包含了多个类.Mac 操作系统提供了几十个框架,主要帮助开发者快速的在Mac 系统上开发应用程序.其中包括一些基础框架,就是为所有程序开发提供基础的框架,其中几个常用的类 ...

  10. windows phone(成语典籍游戏开发)