博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS的Hello World
阅读量:7231 次
发布时间:2019-06-29

本文共 1746 字,大约阅读时间需要 5 分钟。

 

本篇体验AngularJS的Hello World,虽然简单,但体现了AnuglarJS的一些重要概念。

 

大致思路是这样的:

 

● 通常通过为hmtl元素添加AngularJS独有的属性来实现一些功能,比如ng-app, ng-controller

● 在js中,通常需要注册一个module,然后为module在注册controller等。AngularJS不仅仅有angular.js文件,还有其他的js文件,比如用来做路由配置的angular-route.js文件等,每一个文件包含module,使用AnularJS的过程就是让这些modules协同工作的过程。

 

首先在页面引入AngularJS的核心js文件:

 

<script src="angular.min.js"></script>

 

接着,在定义js文件中为当前页面注册一个module:

 

var myApp = angular.module("helloApp",[])

 

以上,module的名称为helloApp, []数组用来存放与当前module有依赖关系的其它modules,比如['ngRoute','....']。

 

然后,为module注册controller。

 

 
myApp.controller("TestController",['$scope',function($scope){
$scope.hello = "Hello World!";
}]);

 

以上,controller()的第一个参数是controller的名称,第二个参数的数组,数组的最后一个元素一定是匿名函数,其它元素是AngularJS的全局service,或者说是全局对象。需要注意的是:数组中的全局service的位置和名称必须和匿名函数的形参一一对应。

 

我们还可以这样写:

 

 
myApp.controller("TestController", function($scope){
$scope.hello = "Hello World!";
});

 

不过,以上的写法在给js文件优化压缩的时候,会改变$scope变量的名称,比如替代为a,由于AngularJS只认$scope不认识a,这样会导致报错。所以,这种方法不推荐。

 

另外,全局service是以注入的方式被当前controller所使用。在AngularJS中,很多全局service都是通过依赖注入的方式被运用。

 

最后,页面中要做3件事情。

 

1、使用ng-app声明当前module的名称

<html ng-app="helloApp">

 

2、使用ng-controller声明需要使用的controller

<body ng-controller="TestController">

 

3、使用{

{}}显示$scope中的变量

<p>{

{hello.name}}</p>

 

完整的代码如下:

 

 
 
 
 
Untitled Document
 
var myApp = angular.module("helloApp",[])
 
myApp.controller("TestController",['$scope',function($scope){
$scope.hello = "Hello World!";
}]);
 
 
 
 

{

{hello}}

 
 

 

当然,实际项目中$scope变量通常用来存储对象。比如:

 

 
var myApp = angular.module("helloApp",[])
 
//声明对象并对其赋值
var messages = {};
messages.name = 'Hello World!';
 
myApp.controller("TestController",['$scope',function($scope){
$scope.hello = messages;
}]);

 

在页面中按如下调用:

 

<p>{

{hello.name}}</p>

 

当然与上面写法等同是:

 

<p ng-bind="hello.name"></p>

 

总结:留给我们的关键词是:module, module之间的协同和依赖, controller, 全局service依赖注入。       

转载地址:http://cvdfm.baihongyu.com/

你可能感兴趣的文章
Linux内核的ioctl函数学习
查看>>
Liunx Shell入门
查看>>
Thread的中断
查看>>
linux --- 内存管理
查看>>
PostgreSQL
查看>>
CPU 超线程、多核
查看>>
用ASCII码显示string.xml中的特殊字符
查看>>
网站301跳转到新域名
查看>>
codewars020: The Clockwise Spiral 数字顺时针螺旋矩阵
查看>>
ios 下拉刷新
查看>>
Django在Windows系统下的安装配置
查看>>
懒到极致:对mybatis的进一步精简
查看>>
Android学习之OTA Update
查看>>
Maven Multi-environment package
查看>>
JMM-java内存模型
查看>>
iOS的soap应用(webservice) 开发
查看>>
Delphi listview 点击列头排序
查看>>
android preference page
查看>>
mysql索引挑选
查看>>
关于冰岛足球的段子
查看>>