AngularJS基础01 从HelloWorld说起
作者:arccosxy 转载请注明出处:http://www.cnblogs.com/arccosxy/
准备工作
首先,创建一个名为index.html的HTML文件,代码如下:
<!DOCTYPE html> <head><title>Learning AngularJS</title> </head> <body></body> </html>
接下来就是加载angular.js库,访问https://angularjs.org/获取AngularJS最新的CDN(内容分发网络)链接,或者用下面这个链接https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js,这是Google的CDN,把它加入到head标签中:
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body><div id='content'></div> </body> </html>
好了,现在我们有了一个加载了AngualarJS的HTML页面,go on!
一些设置
要告诉AngularJS将这个页面渲染为一个应用,需要做几件事情。
使用ng-app告诉AngularJS应该管理页面中的哪一部分。如果你正在构建一款纯AngularJS应用,你应该把ng-app指令写在<html>标签中。这里,我们演示让AngularJS只管理页面中的一部分,简单地在DIV标签中加入ng-app="MyTutorialApp"即可。
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp'></div> </body> </html>
现在,我们告诉了AngularJS这个DIV是一个angular应用。然后,我们需要声明使用哪一个控制器:
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp' ng-controller='MainController'></div> </body> </html>
MainController是我给控制器起的名字,你可以取任何更有意义的名字。Ok,现在MainController将可以控制DIV中的一切,但是这个控制器在哪?我们需要创建它!在index.html所在的目录下新建名为app.js的JS文件,内容如下:
var app = angular.module('MyTutorialApp',[]);
这个JS文件所做的是新建一个名为MyTotorialApp的AngularJS应用,并且把它赋给了变量app,我们稍后会使用到它。现在我们需要再创建一个名为maincontroller.js的文件,内容如下:
app.controller("MainController", function($scope){});
这个文件为MyTotorialApp分配了一个名为MainController的控制器。这两个JS文件其实可以合并为一个,但为了方便维护和容易理解,我把它们拆成两个分离的文件。接下来,把这两个JS文件都加载进HTML页面中。注意,app.js需要在maincontroller.js之前被加载进来。
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script><script src="app.js" type="text/javascript"></script><script src="maincontroller.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp' ng-controller='MainController'></div> </body> </html>
现在,我们的准备工作已经做完了,接下来看一个应用是怎样产生的。
Hello World
当我们创建maincontroller.js的时候,你可能已经注意到了$scope这个变量,它被当做控制函数的参数,是我们分配控制器变量的地方,这些变量可以在HTML页面的DIV中被使用。不明白没关系,举个栗子来说明,在控制器内声明一个$scope变量。
app.controller("MainController", function($scope){$scope.welcome = "Hello World"; });
在上面的代码中我们新建了一个scope变量并分配一个字符串给它。接下来我们可以在HTML中访问它。
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script><script src="app.js" type="text/javascript"></script><script src="maincontroller.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>{{welcome}}</div> </body> </html>
我们在HTML中用{{}}(两个花括号)把welcome变量包起来,这样AngularJS就知道该处理它了。注意,在这里welcome前面没有加$scope。现在用浏览器打开index.html,你会看到如下内容:
现在你应该大致上理解scope变量了,它们通过在HTML中用双花括号{{}}来访问。同时也应该明白scope变量只在该控制器范围内有效,你不能从DIV之外访问到welcome变量。
总结
ng-app,ng-controller
$scope变量
转载于:https://www.cnblogs.com/arccosxy/p/3805679.html
AngularJS基础01 从HelloWorld说起相关推荐
- Java基础01 从HelloWorld到面向对象
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Java是完全面向对象的语言.Java通过虚拟机的运行机制,实现"跨平台 ...
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- 【马士兵】Python基础--01
Python基础–01 文章目录 Python基础--01 输出函数print 转义字符与原字符 标识符和保留字 输出函数print print(520) print('helloworld') pr ...
- Java 基础-01 Java语言入门
文章目录 Java 基础-01 Java语言入门 1.计算机基本概念 1.1 计算机概述 1.2 计算机组成 1.3 CPU.内存与硬盘 2.软件基本概念 2.1 软件概述 2.2 人机交互方式 2. ...
- Java基础01 注释
JAVA基础01 注释 注释 平时我们编写代码,在代码量比较少的时候,我们还是可以看懂自己写的,但是当项目结构一旦复杂起来,我们就需要用到注释了. 注释并不会被执行,是给我们写代码的人看的 书写注释是 ...
- AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
- 第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基础
第二讲 html5框架+Crosswalk 打包 app 以及 Angularjs 基础(初步认识了解 Angularjs) 学习要点: 1. html5 框架+Crosswalk 打包 a ...
- AngularJs 基础教程 —— 依赖注入
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- 依赖注入 AngularJS 依赖注 ...
- JavaScript基础01【简介、js编写位置、基本语法(6种基本数据类型)】
学习地址: 谷粒学院---尚硅谷 尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版JavaScrip ...
最新文章
- Nginx PHP 报504 Gateway time-out错误的解决方法
- HDU - 1520 Anniversary party [树形dp]
- fork()函数_fork()函数的使用
- Object.defineProperty方法
- EWM RF 开发常用代码
- C#中使用StreamReader实现文本文件的读取与写入
- Asp.Net数据库编程-10条最优方法[翻译]
- 快速解决 Android SDK Manager 无法下载或者下载速度慢
- 分层结构,协议,接口,服务
- android layout(l, t, r, b);,服务器里的a,t,l,r,b是什么意思? Android编程中关于layout(l,t,r,b)函数的问题...
- [转]android logo:内核、android开机动画
- bert之我见 - positional encoding
- hive 筛选出数字_后悔没早点学会这几个万能的Excel筛选技巧,这些操作技巧得记牢...
- Asp.Net 5.0简介
- 123个微信小程序源码分享(附下载)
- 大数据概览以及当下实用的主流开发
- 简历包装严重,作为面试官,我是如何甄别应聘者的包装程度
- Towards a new generation of artificial intelligence in China
- 申请license激活F5-LTM步骤
- Java 打印 Excel 表格