Angular JS 入门(一)

百度百科对Angular JS的简介


AngularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

我的学习


写个小程序看看Angular JS的效果

下载Angular Js文件,跟其他js引用方式一样,能用url,也能下载都本地直接加载。

下载或者引用url可为:

http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js

当然,现在已经到2.0+版本了,可以下载最新版本去玩。

我是下载放到本地,跟html同一目录。

目录结构:


目录结构


Angular JS表达式使用双大括号{{}},如{{name}}。必须声明ng-app才能显示angular js的效果。

程序:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="name='Lily'">
   <p>名字 : <input type="text" ng-model="name"></p>
   <h1>Hello {{name}}</h1>
   <span ng-bind="name" style="background-color:red"></span>
   <h2>1+2={{1+2}}</h2>
   <h2>1+2+3+''+2={{1+2+3+''+2}}</h2>
   <h2>1+2+''+2+3={{1+2+''+2+3}}</h2>
   <h2>1+''+2={{1+''+2}}</h2>
   <h2>''+1+2={{''+1+2}}</h2>
   <h2>''+1+2+3={{''+1+2+3}}</h2>
   <h2>1+2+''={{1+2+''}}</h2>
</div>
<div>
   <p>未申明ng-app/名字 : <input type="text" ng-model="name"></p>
   <h1>Hello {{name}}</h1>
</div>

</body>
</html>



页面效果


思考:为什么不给ng-app取个名字呢

如果ng-app指定一个名字,则该模块下必须要有ng-controller 且javascript要定义该controller,否则表达式不起作用。

如上述代码,如果 ng-app=""改为 ng-app="myApp",则无angular js的效果,如下图:


ng-app指定名字未使用control

正确打开方式,应该为:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-init="name='Lily'" ng-controller="myControl">
   <p>名字 : <input type="text" ng-model="name"></p>
   <h1>Hello {{name}}</h1>
   <span ng-bind="name" style="background-color:red"></span>
   <h2>1+2={{1+2}}</h2>
   <h2>1+2+3+''+2={{1+2+3+''+2}}</h2>
   <h2>1+2+''+2+3={{1+2+''+2+3}}</h2>
   <h2>1+''+2={{1+''+2}}</h2>
   <h2>''+1+2={{''+1+2}}</h2>
   <h2>''+1+2+3={{''+1+2+3}}</h2>
   <h2>1+2+''={{1+2+''}}</h2>
</div>
<script>
 var myApp = angular.module('myApp',[]);
 myApp.controller('myControl',function($scope){
  $scope.name = 'Huang'; 
 });
</script>

</body>
</html>

给ng-model初始化值

上述代码包括了两种初始化值的方式:

1) ng-init="name='Lily'"

2) 使用了controller为name赋值,初始化为Huang

最后页面显示的Lily,所以可以认为ng-init的赋值优先级比较高。


思考:同一个ng-app可以调用多个control吗?

当然可以,同一个ng-app可以调用多个controller,目前我只知道在不同html元素调用不同controller,不知道同一个元素是否能调用多个controller

比如一个ng-app中有两个子div,每个div都分别调用不同的controller。

<div ng-app="myApps" >                                                                                                     <div ng-controller="myCtrl">名: <input type="text" ng-model="firstName" ><br></div>
<div ng-controller="myCtrl1">姓: <input type="text" ng-model="lastName"><br></div>   </div>

javascript:                                                                                                                                 

var app = angular.module('myApps', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "Zor";
}).controller('myCtrl1', function($scope) {
    $scope.lastName= "OY";
});

每个control只能对调用它的元素里的ng-model做操作。上述,如果myCtrl中对lastName赋值是赋不了;同样myCtrl1中对firstName赋值也是赋不了的。

思考:一个页面是否能加载多个ng-app

我觉得行,那么如何加载?试过就简单的写两个ng-app,第二个ng-app里的表达式显示出来仍然是表达式。所以这个问题就留给下次再说。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容