luluzero的angularJs学习之路_angularJs示例代码
最近开始自学 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示例代码的更多相关文章
- 50.AngularJs directive详解及示例代码
转自:https://www.cnblogs.com/best/tag/Angular/ 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github ...
- angularJS 学习之路
AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序.也就是angularjs作用的入口 作用在什么标签或者整个body ...
- AngularJS 学习之路（1）
AngularJS 是一个 JS 框架,适用于以数据操作为主的 SPA (Single Page Application)应用. 不再是 "先查找元素在操作元素",所有操作都以 & ...
- IOS学习之路五（代码实现UITableView）
先展示一下运行结果: 代码实现: 1.先创建一个空项目: 2.创建一个Controller:(TableViewController) 在AppDelegate.h中声明属性: // AppDele ...
- tensorflow学习之路---简单的代码
import numpyimport tensorflow as tf #自己创建的数据x_data = numpy.random.rand(100).astype(numpy.float32)#创建 ...
- AngularJS学习之旅
开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直 ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- 推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- angularjs学习总结 详细教程（转载）
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
随机推荐
- Google判断广告点击作弊的几种方式和数据
Google判断广告点击作弊的几种方式和数据. 作弊广告点击的CTR数据太高网上有研究说如果CTR值大于了10%的站被干掉的可能性很高,他们会被单独拿出来分析.一般来说低于6-7%的CTR是安全红线 ...
- 查询自己电脑的IP
1.怎样查询电脑的IP 1)运用dos命令 在运行窗体上输入cmd,进入dos命令窗体,输出ipconfig/all命令,找到自己的IP地址 上面所圈出的就是本机IP地址 2) 进入“网络和共享中心” ...
- 雷军V5，米3横空出世
小米3 下午两点,小米CEO:雷军(也是一个传奇人物),虽然没购买门票,只是自己一个人看微博,看新闻,还是了解到了小米3的面貌,这次雷哥还给大家带来了MITV,售价￥2999!(无法相信)顶配.这次我 ...
- 类库LinqToExcel的介绍
LinqToExcel是一个.net framework平台下开源项目,它主要实现了LINQ的语法查询Excel电子表格.类型之前的LINQToXXX如果你是LINQ语法糖爱好者那最适 ...
- 硅谷新闻8--TabLayout替换ViewPagerIndicator
1.关联库 compile 'com.android.support:design:23.3.0' 2.布局写上TabLayout <android.support.design.widget. ...
- IOS6学习笔记（二）
四.使用关联引用为分类添加数据 虽然不能在分类中创建实例变量,但是可以创建关联引用(associative reference).通过关联引用,你可以向任何对象中添加键-值(key-value)数据. ...
- web api 限制单个IP在一定时间内访问次数
ps:下面实例是每隔30秒访问次数不超过3次 1.Filter: using Infrastructure.Log; using Infrastructure.Web; using Lemon.Sta ...
- MSCRM 修改 默认组织
目前组织管理器上的方法是无效的,期待MS打补丁吧. 下面介绍修改DB的方法: 1)打开Sql server management,找到MSCRM_config数据库,打开数据表:SystemUser和 ...
- 关于SharePoint 的Client object model该何时load和execut query的一点自己的看法
很多人在用client object model的时候,不知道何时或者该不该load,今天看到一个观点描述这个问题,觉得很有道理,和大家分享.那就是写client object model就像写sql ...
- Enforcing the correct protocol for partially SSL secured SharePoint sites
Enforcing the correct protocol for partially SSL secured SharePoint sites http://www.sharepointconfi ...