angularJS在github上面进行一个代码的托管
地址:https://github.com/angular/angularjs.org
注意:需要兼容IE8的同学请下载1.3之前的版本,在1.3之后已经放弃了IE8,估计是为了以后大版本升级做铺垫吧。各个版本的下地址在这里https://github.com/angular/angular.js/releases
新建一个hello.html
<script src="/soa-rest/static/app-js/angular.js"></script> <script src="/soa-rest/hello.js"></script>
angular.js是 NG的核心文件必须导入 hello.js 是书写我们自己的js代码文件。
在hello.js中加入如下代码
var app = angular.module('helloModule',[]) .controller('helloController',['$scope',function($scope){ $scope.world = 'World !!'; }]);
第一行
var app = angular.module('helloModule',[])
告诉NG我要创建一个新的模块,第一个参数是模块的名字‘helloModule’,第二个参数是一个数组,传入所依赖的模块名称。这里我们只是一个简单的hello,不需要以来其他模块,所以传入一个空数组即可。
第二行
.controller('helloController',['$scope',function($scope){ $scope.world = 'World !!'; }]);
NG是支持链式编程的,可以直接点,也可以使用app.的方式,看自己习惯,我更习惯链式编程的方式。这里看到一个新的单词‘controller’,没有错这就是NG中mvc的控制器的创建方式,第一个参数是控制器的名称,第二个参数是一个数组。在数组中第一二个参数是‘$scope’,scope的意思是域,同样在NG中他同样也是作用域的概念,这是一盒NG内置的对象,也可以理解为当前控制器作用域,NG中使用它来进行双向数据绑定,方法绑定等等。第二个参数是匿名函数,NG在执行的时候看到我们声明在匿名函数之前的‘$scope’便会把$scope注入给我们,我定义一个参数接受即可,如果没有找到我们所需要的便会抛出Error(是不是和spring的注入一样呢?思想是一样呀,嘿嘿!)。在匿名方法内部声明一个局部变量为world,并且赋值。这样子控制器就算写好了。
在hello.html页面中编写
<body ng-app="helloModule"> <div ng-controller="helloController"> hello <span ng-bind="world"></span> <br> hello <span>{{world}}</span> </div> </body>
第一行中的body中有一个属性为ng-app,意思为程序的入口,等同于java中的main方法。一个应用一般存在一个入口即可。ng-app的值其实就算我们刚刚声明的模块的名称。接下来的第二行一个DIV 中有一个属性 ng-controller 看单词意思就知道是ng的控制器了,value是刚刚创建的控制器的名称即可。在NG中有两种获取值得方式 ,第一种方式就算使用{{}}两对大括号的方式,这种方式是存在一定的问题的。在刷新速度过快活着网络卡顿的时候,会将{{key}}这种代码级别的展示给用户。第二章方式很好的解决了这一问题,使用NG提供的属性ng-bind 即可,简单把!以上步骤完成之后刷新hello.html 。
hello World !! hello World !!
两个hello World就打印在页面上了。
相关推荐
ASP.NET mvc,AngularJS,boostrap
前端MVC框架的意义.pdf
AngularJS 开发 ASP.NET MVC.
完整的Spring+MVC+AngularJS例子 maven项目。
Web前端MVC框架的意义研究.pdf
这是C# mvc 5框架快速搭建文档,包含bootstrap前端框架。
MVC框架
Magix 是用于构建大型富交互单页应用的前端MVC框架。它提供了基于树状结构的视图系统,页面初始渲染以及URL 变动都将从根 View 开始逐层进行, 这使得局部变化井然有序;同时遵循Magix的开发约定可以很好的控制页面...
actionScript的pureMVC框架HelloWorld,对于刚刚学习pureMVC的初学者有帮助
前端MVC框架AngularJS路由视图所需资源Angular-route.js
ASP.NET MVC框架开发系列课程(1):MVC模式与ASP.NET MVC框架概述
js客户端的MVC框架,是一个堪比jquery的一个新生力量,Web网页的发展将会是一个页面代表一个应用系统了
支持双语切换,兼容IE6前端展示框架,spring mvc 3.2版本
C++实现简单的MVC框架
使用AngularJs ASP.NET MVC Web API EF构建一个多层SPA的例子 使用AngularJs ASP.NET MVC Web API EF构建一个多层SPA的例子
以ASP.NET的MVC为例,利用jQuery的Ajax方法,1.前端从后端分别获取文本数据及数据库数据;2.前端将数据传递给后端
前端MVC框架,前端MVC框架,前端MVC框架,前端MVC框架,前端MVC框架,
spring-mvc-helloworld 可以通过jetty启动,访问 http://localhost:8010/spring-mvc-helloworld/hello/world
Spring MVC+BlzeDS+Flex框架实践:HelloWorld篇 .docSpring MVC+BlzeDS+Flex框架实践:HelloWorld篇 .doc
MVC模式与ASP.NET MVC框架概述源码MVC模式与ASP.NET MVC框架概述源码MVC模式与ASP.NET MVC框架概述源码MVC模式与ASP.NET MVC框架概述源码MVC模式与ASP.NET MVC框架概述源码MVC模式与ASP.NET MVC框架概述源码