当前位置: 首页 > news >正文

AngularJS的Hello World

 

本篇体验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>

 

完整的代码如下:

 


 
<!doctype html>
<html ng-app="helloApp">
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <script src="angular.min.js"></script>
    <script>
        
        var myApp = angular.module("helloApp",[])
 
        myApp.controller("TestController",['$scope',function($scope){
            $scope.hello = "Hello World!";            
        }]);
        
    </script>
</head>
<body ng-controller="TestController">
   <p>{{hello}}</p>
</body>
</html>

 

当然,实际项目中$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依赖注入。       

相关文章:

  • 日志池
  • 电子病历,到底是用BS还是CS
  • Visual Studio (VSIX,项目模板 )制作
  • C#下实现的半角转与全角的互转
  • shell训练营Day19
  • 创建使用口令的角色,并分配给用户
  • 当Json数据中的key为Java关键字时,在定义实体类的时候不能对该字段进行声明,所以需要对字段进行特殊处理...
  • day16:计算文档中数字|检测两个文件的不同|检测网卡流量|批量杀死sh|检测是否开启80和是什么服务...
  • ruby多线程理解
  • 面试系列-高并发之synchronized
  • 解决fastJson无序问题
  • Filling Your Toolbox (a.k.a. Essential Tools List)
  • sed写的命令收集
  • (轉貼) 2008 Altera 亞洲創新大賽 台灣學生成果傲視全球 [照片花絮] (SOC) (News)
  • [转载]---Oracle SQL Loader
  • angular2开源库收集
  • Babel配置的不完全指南
  • ECS应用管理最佳实践
  • Fabric架构演变之路
  • httpie使用详解
  • js递归,无限分级树形折叠菜单
  • js继承的实现方法
  • js写一个简单的选项卡
  • MD5加密原理解析及OC版原理实现
  • Python打包系统简单入门
  • React as a UI Runtime(五、列表)
  • ReactNative开发常用的三方模块
  • Spark VS Hadoop:两大大数据分析系统深度解读
  • SQLServer之创建显式事务
  • 对象引论
  • 关于extract.autodesk.io的一些说明
  • 将回调地狱按在地上摩擦的Promise
  • 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 浅谈Golang中select的用法
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 小程序开发中的那些坑
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立,近80家企业助力智能驾驶行业发展 ...
  • 说说我为什么看好Spring Cloud Alibaba
  • ​Spring Boot 分片上传文件
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • $GOPATH/go.mod exists but should not goland
  • %check_box% in rails :coditions={:has_many , :through}
  • (4)事件处理——(7)简单事件(Simple events)
  • (新)网络工程师考点串讲与真题详解
  • (一)插入排序
  • (已解决)报错:Could not load the Qt platform plugin “xcb“
  • (译)计算距离、方位和更多经纬度之间的点
  • (转)http协议
  • .【机器学习】隐马尔可夫模型(Hidden Markov Model,HMM)
  • .NET DataGridView数据绑定说明
  • .NET上SQLite的连接
  • /etc/sudoers (root权限管理)
  • [ C++ ] STL priority_queue(优先级队列)使用及其底层模拟实现,容器适配器,deque(双端队列)原理了解
  • [2023年]-hadoop面试真题(一)
  • [AIGC] MySQL存储引擎详解