33.AngularJS 应用 angular.module定义应用 angular.controller控制应用

【33.AngularJS 应用 angular.module定义应用 angular.controller控制应用】的更多相关文章

33.AngularJS 应用 angular.module定义应用 angular.controller控制应用

转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Controller) 用于控制 AngularJS 应用. ng-app指令定义了应用, ng-controller 定义了控制器. <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type=&…

AngularJS源码解析1：angular自启动过程

angularJS加载进来后,会有一个立即执行函数调用,在源代码的最下面是angular初始化的地方.代码展示: bindJQuery(); publishExternalAPI(angular); jqLite(document).ready(function() { angularInit(document, bootstrap); }); bindJQuery方法的作用是:检查你的主页面是否引用了jquery,没有的话,就用angular本身自带的JQLite,否则使用你引用的jquery…

angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

壹 ❀ 引公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算了,结果一番波折,也是弄的我头大,所以这里就做个记录吧. 我们都知道锚点一般做法是通过a标签结合目标id来做,结果有趣的事情发生了,我在项目中写的锚点就是不生效. <a href="#Top">click</a> <div id="Top"…

AngularJS - 插件，module注入

Index.html <body> <div ng-app="myApp"> <div ng-controller="firstController"> {{name}} </div> <div ng-controller="secondController"> {{name}} </div> <div ng-controller="thirdControll…

【angularJS】定义模块angular.module

模块定义了一个应用程序.控制器通常属于一个模块. JavaScript 中应避免使用全局函数.因为他们很容易被其他脚本文件覆盖. AngularJS 模块让所有函数的作用域在该模块下,避免了该问题. 简单的定义一个Angular模块(module) var app = angular.module("myApp", []); 这种方法带有两个参数,一个是模板名,一个是依赖注入列表[该模块所依赖的模块],数组为空,表示当前注册的模板不需要依赖关系. 如果依赖不为空,则要保证其依赖的模块…

AngularJs angular.Module模块接口配置

angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函数. factory(name,providerFunction); name:服务名称. providerFunction:创建服务的实例的函数. service(name,constructor); name:服务名称. constructor:一个将被实例化的构造函数. value(name,…

AngularJs angular.injector、angular.module

angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules: Array 注入的模块(一个或多个). 使用代码: (function () { angular.module("firstModule", []) .service("firstService", function () { this._log = functi…

[AngularJS] Adding custom methods to angular.module

There are situations where you might want to add additional methods toangular.module. This is easy to accomplish, and can be a handy technique. //For directive template <hello></hello> //For directive controller <li menu-item ng-repeat=&quo…

-_-#【Angular】定义服务

AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta charset="utf-8"> <title></title> </head> <body ng-controller="TestCtrl"> <script src="angular.min.js"…

AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

requirejs + angular + angular-route 浅谈HTML5单页面架构众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无…

angular.module 详解

AngularJS 模块模块包含了主要的应用代码. 一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码. 可以将module理解成一个容器,可以往其中放入controllers.services.filters.directives等应用的组成部分. 创建模块 <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); &…

angular报错：angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq

报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p> </div> function HelloAngular($scope){ $scope.greeting = { text:'hello' } } 在用angular1.3版本以前的时候,上面的代码运行是没有问题的.但是我更新版本后报错 Error: [ng:areq] http://e…

Angular Module声明和获取重载

module是angular中重要的模块组织方式,它提供了将一组内聚的业务组件(controller.service.filter.directive…)封装在一起的能力.这样做可以将代码按照业务领域问题分module的封装,然后利用module的依赖注入其关联的模块内容,使得我们能够更好的”分离关注点“,达到更好的”高内聚低耦合“.”高内聚低耦合“是来自面向对象设计原则.内聚是指模块或者对象内部的完整性,一组紧密联系的逻辑应该被封装在同一模块.对象等代码单元中,而不是分散在各处:耦合则指模块.…

[AngularJS] Consistency between ui-router states and Angular directives

ui-router's states and AngularJS directives have much in common. Let's explores the similarities between the two and how these patterns have emerged in Angular. Keeping your states and directives consistent can also help with refactoring as your app…

[RxJS + AngularJS] Sync Requests with RxJS and Angular

When you implement a search bar, the user can make several different queries in a row. With a Promise based implementation, the displayed result would be what the longest promise returns. This is the problem which we want to solve. <!DOCTYPE html> &…

Angular - - angular.Module

angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函数. factory(name,providerFunction); name:服务名称. providerFunction:创建服务的实例的函数. service(name,constructor); name:服务名称. constructor:一个将被实例化的构造函数. value(name,…

Angular - - angular.injector、angular.module

angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules: Array 注入的模块(一个或多个). 使用代码: (function () { angular.module("firstModule", []) .service("firstService", function () { this._log = functi…

angular中定义全局变量及全局变量的使用

一个例子,定义了两个变量,并且把变量显示出来: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>interval</title> <script type="text/javascript" src="js/angular/angular.min.js&quo…

angular.module方法

关于module的定义为:angular.module(‘com.ngbook.demo’, []).关于module函数可以传递3个参数,它们分别为: name:模块定义的名称,它应该是一个唯一的必选参数,它会在后边被其他模块注入或者是在ngAPP指令中声明应用程序主模块: requires:模块的依赖,它是声明本模块需要依赖的其他模块的参数.特别注意:如果在这里没有声明模块的依赖,则我们是无法在模块中使用依赖模块的任何组件的:它是个可选参数. configFn: 模块的启动配置函数,在ang…

[AngularJS] Hijacking Existing HTML Attributes with Angular Directives

Angular overrides quite a few existing HTML elements and attributes. This can be a useful technique in our own applications. We will build a directive that adds additional functionality to the src property of an <img>. Javascript: /** * Created by A…

angular.module()

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>angular.module</title> </head> <body ng-app="moduleExample"> <h1>angular.module</h1> <p> <span>描述:</…

Angular service定义服务

<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title></head><body><div ng-co…

angular.module()参数问题

var app = angular.module('myApp', []); 第二个参数是依赖的模块,因为这里不需要依赖其它模块,因此为空,但是[]不能省略.…

angular.module()创建、获取、注册angular中的模块

// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只有一个参数(模块名),代表获取模块 // 如果模块不存在,angular框架会抛异常 var getModule = angular.module("myModule"); // true,都是同一个模块 alert(createModule == getModule); 该函数既可以创建…

Angular企业级开发(3)-Angular MVC实现

1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能.除此之外,此模式通过对复杂度的简化,使程序结构更加直观.软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能.专业人员可以通过自身的专长分组: 控制器(Controller)- 负责转发请求,对请求进行处理. 视图(View) - 界面设计人员进行图…

对angular实现延迟加载template和controller

1.在lib目录中添加 script.js 文件,并在index.html其他<script>之前引用之: <script src="lib/script.js"></script> 该文件来自 https://github.com/ded/script.js/blob/master/dist/script.js . 2.在app.js中增加全局函数LazyLoadTemplate()和LazyLoadJs(): function LazyLoa…

angular学习笔记02 angular指令大全

第一步先要引入angular, 第二步在 html 标签中<html ng-app> 加入ng-app(这是个必须的,不然会报错) 接下来就可以去使用angular的各种指令了. //js文件 js语法需要注意在网上的写法有很多,最好是按标准的写法来写,不然js代码经过压缩就不能使用了(很重要) 压缩代码会出错,不压缩的话还是能运行的,原因是压缩代码会把关键字替换,因此 angular 在定义的时候需要这样. angular.module('antsins.controllers…

淡淡理解下AngularJS中的module

在AngularJS中module是一个核心的存在,包括了很多方面,比如controller, config, service, factory, directive, constant, 等等. 在Javascript中如何实现类似module的功能呢? 或者说,我们定义一个函数,如何把函数内的函数向外界开放呢? 我想,可以把函数中的函数作为一个对象的键值,从而向外界开放. 这样说很笼统,其实是这样的: var myModule = function outerFuction(){ var m…

angular学习（四）-- Controller

1.4 控制器:Controller ng 中的控制器用来对 scope 进行操作包括初始化数据和定义事件响应函数等 ng 用来解耦业务逻辑层和视图层的关键 controller 操作 scope,View 则展现 scope 的内容传统前端程序中大量复杂的 DOM 操作逻辑都被转变成对 scope 的操作定义控制器的三种方式定义控制器可以有三种方式,注意第一种已经被淘汰. 第一种:传统方式,使用全局函数定义控制器: function DemoCtrl($scope) { // code…

Angular系列文章之angular路由

路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute. 不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!! 于是,一个基于ngRoute开发的第三方路由模块,叫做ui.router,受到了大家的“追捧”. ngRoute vs ui.router 首先,无论是使用哪种路由,作为框架额外的附加功能,它们都将以模块依赖的形式被引入,简而言之就…