03、AngularJs的模块与控制器

  大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序。而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的。同时,模块允许声明来描述应用中依赖关系,以及如何进行组装和启动:

  1、AngularJs的模块是组织业务的一个框架,在一个模块中定义多个服务。当引入一个模块的时候,就可以使用这个模块提供的一种或者多种服务。

  2、AngularJs本身的一个默认的模块是ng,ng模块提供了$http,$scope等等的服务。

  3、服务只是AngularJs提供的多种机制中的一种,其他的还有指令(directive),过滤器(filer)以及其他的配置信息。

  4、在AngularJs中,也可以在已有的模块中定义一个服务,也可以先定义一个模块,然后在新模块中定义新的服务。

  5、在AngularJs中,服务是需要显示的声明依赖(引入)关系的,让ng自动引入服务中。

  

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="ngApp">
<div ng-controller="firstController">
    <input type="text" ng-model="name"/>
    {{name}}
</div>
</body>
<script type="text/javascript" src="../public/javascripts/lib/angular.js"></script>

<script type="text/javascript">
    angular.module(‘ngApp‘, []).controller("firstController",function($scope){
        $scope.name="xixi";
    });
</script>

</html>

  上面是模块跟控制器的定义方式。我们使用augularjs的module方法定义一个模块 ngApp,中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字。

我们使用augularjs的controller方法定义一个控制器firstController。在html页面中ng-app="ngApp"是定义了这个模块的控制位置,而ng-controller="firstController"则是定义了控制器的作用区域。

  本篇中的示例代码运行的结果如下:

  

时间: 2024-10-25 10:18:42

03、AngularJs的模块与控制器的相关文章

angularjs学习笔记--主html&amp;template html&amp;module&amp;template js、模块、控制器、双向数据绑定、过滤器

// Register the `phoneList` component on the `phoneList` module, angular. module('phoneList'). component('phoneList', {...}); // Define the `phonecatApp` module angular.module('phonecatApp', [ // ...which depends on the `phoneList` module 'phoneList'

AngularJS之基础-3 控制器(基本语法)、模块(使用模块注册控制器)

一.基本语法 基本概念 - ng-controller function controllerName($scope,$http,$element){} $scope $http - $http.get(url).sucess(function(result){}) 定义基本数据类型 - $scope.Name = "John" - $scope.Email = [email protected] - $scope.Age = 30 定义对象属性 定义方法 二.模块 使用模块注册控制器

模块和控制器包含在JS文件中

在AngularJS应用程序中,通常是把模块和控制器包含在javascript文件中. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge&qu

黄聪:AngularJS 动态加载控制器实例-ocLoazLazy

一.AngularJS动态加载控制器和视图实例 路由配置关键代码: [javascript] view plain copy print? //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据和控制器***/ views: { "": { templateUrl: function ($stateParams) { console.info($stateParams); return '/template/

AngularJS: 自定义指令与控制器数据交互

<!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>--> <sc

AngularJS -- Module (模块)

什么是AngularJS的模块 我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块! 大多数的应用程序都是有一个自己的函数入口方法Main ,用它来进行初始化,以及加载装配各个模块,然后这些模块的组合,构成了你的应用程序,对吧? 但是,but, AngularJS应用程序却不是这样的哦,它没有main 方法,没有函数入口.

angularjs 模块与控制器 (多个模块module?? 多个控制器controller??)

angularjs 中只能有一个模块module(ng-app=""),一个模块可以有多个控制器(ng-controller="") 自己试验的时候,js跟页面可以写在一块,但是大型项目开发中,最好做到html与js分离,便于以后维护. 下图所示:ng-app只能有一个,一个ng-app 中可以有多个controller ;定义多个ng-app时无意义. 运行效果图如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

AngularJS之作用域及控制器(一)

前言 之前有接触过基本的AngularJS,未过多涉及,于是乎本系列我们来着重讲讲AngularJS,对AngularJS中重要的几大内容进行梳理并进行一些小的例子的书写.在之前项目过程中用到过avalon,但是avalon并未被广泛使用也就放弃了,至于孰最轻量,性能更好作为非专业的我就不妄下结论,lz只明白一点,业界最流行什么前端框架,招聘大部分要求会哪些框架,lz才会去学习,当然其中的乐趣也是油然而生,每一次敲代码的过程好似在浩瀚大海中探幽一番,别有一番滋味. 简短介绍 AngularJS也

(十八)angularjs中模块bootstrap后,动态注册新的controller

在angular中我们一般是先注册控制器和dom之间的关系,然后才调用bootstrap加载angular模块.这样dom上注册的控制器就会被自动调用. <html> <head> <script src="jquery-1.11.1.min.js"></script> <script src="angular-1.2.25.js"></script> <script> // 创建一