Angularjs的基本结构

princejingyun 2016-08-22

AngularJS是一款非常强大的前端MVC框架。大概可以分为这三类：

        1.Directive（指令）

        2.Controller（控制器）
        3.Service （服务）

一、首先是服务(service)

       它是一个单例，就是无论这个服务注入到任何地方，对象始终只有一个实例。它不想我们平时在js中用的function函数，因为服务被定义在一个模块中，所以它的使用范围是可以被管理的。这也就避免了对全局的污染。

       一般在写angular框架的时候，基本就是如下样式：

      html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet"  type="text/css"  href="../css/index.css" />
    <script src="../lib/angular-1.5.8/angular.min.js"></script>
    <script src="../services.js"></script>
</head>
<body ng-app='routingDemoApp' ng-controller="myCtrl">
<div>
 <-- //定义好 ng-view -->
    <div ng-view></div>
<div my-Directive></div>
</div>
</body>
</html>

这里就先不讲路由了。

写service：

var app = angular.module('routingDemoApp',['ngRoute']);
app.service('myservice',function() {
       var service = {
              return  { name: Jack };
       }
       return  service;
})

  ng里还有很多内置的服务如$location等，上例写的是一个简单的自定义服务，返回的是一个对象。

二、控制器(controller):

   angular是但页面应用，通过不同的控制器来渲染不同的页面，一般情况下都是一个页面对应着一个控制器

   controller:

app.controller('myctrl',function(myservice,$scope) {
       $scope.page = myservice;
})

 三、Directive：

app.directive("myDirective", function () {
    return {
        restrict: 'EA',
        controller: 'myctrl',
        template: "<p>{{page}}</p>"
      }
});
princejingyun

princejingyun

相关推荐

聊聊技术选型 - Angular2 vs Vue2

目前没法确切的评估未来一段时间这两个框架的维护情况，但基本能确定的是，框架的生命周期不会比我们大部分业务的生命周期短。从国内的使用情况以及社区发展来看，Vue 更胜一筹。从学习曲线上看，Angular 要更陡峭，Vue 要相对平缓一些。从能够开发的应用的全

QiaoranC / 0评论 2020-09-25

快速入门Web前端开发的正确姿势

入门标准很简单，就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular

颤抖吧腿子 / 0评论 2020-09-04

为什么Vue更符合这个时代的大势所趋？

不久前，尤雨溪发布了 Vue 3.0 Beta 版本。正是这些能力，确保了“后浪” Vue 能够与 React、Angular 等老牌前端开发框架并驾齐驱，在国内开发者当中占据越来越重要的位置，逐渐有发展成为国内三大前端框架之首的趋势。不过，在读者看来，V

liduote / 0评论 2020-06-16

js 调用 angularJs 的方法

var $scope = angular.element.scope(); // 如果先调用 Controller 里面的方法的话$scope.func1;// 改变了值之后还需要调用一下下面的方法, 才可以刷新最新改变的内容$scope.$apply()

阿斌Elements / 0评论 2020-06-11

浅谈web三大框架优缺点及适用场景之Angular框架

同时，作为背后的开发公司，Google有一个适用于Angular框架的Material Design UI库。我们结合Angular框架及UI库就能完成大部分的前端开发工作。Angular 官方还提供了开发应用所需的脚手架，包含测试、运行服务、打包等部分。

xxuncle / 0评论 2020-06-05

前端学习之angular项目的本地运行步骤

前端开发中经常需要拷贝别人的项目并在本地运行，本文就讲一讲一个angular项目的运行步骤。　　很简单，以后有什么问题再补。

ChinaGuanq / 0评论 2020-06-05

Angular中处理Http请求

使用HttpClient.get等方法进行http请求，一般都是返回的一个Observable，给上层进行订阅处理。将响应转成响应的Model类，可以直接在HttpClient.get中指定，如果有特殊处理，那么可以在返回的Observable后继续使用p

wanghongsha / 0评论 2020-03-26

angular9 如何 增加 webpack配置 并将px转换为rem

"builder": "@angular-builders/custom-webpack:browser", 这里进行替换。一共需要替换两处，添加一处信息 具体替换，注意 如果需要使用postcss-loader 需

csm0 / 0评论 2020-03-05

框架比较

Angular是一个框架，而不是一个库，他是一个完整的解决方案，功能齐全。适合较为复杂的SPA应用，比如工具类、OA类的应用。它属于大型框架，各个模块比较完整，提供的工具和拓展也比较丰富，适合沉淀大型项目，但上手成本高。并且原生依赖于typescript。

shyoushine / 0评论 2020-02-25

electron &amp;&amp; angular 构建桌面应用（二）

Electron由主进程和渲染器进程所组成。每个进程在应用程序中扮演不同的角色，Electron包含不同的模块来帮助您构建应用程序。某些模块，例如从系统剪贴板读写的能力，在这两种类型的进程中都可用。其他的，比如访问操作系统接口的能力，仅限于主进程。Elec

electronvolt / 0评论 2020-02-12

Angular单元测试之事件触发的实现

=在angular项目中时常有一些click、input、focusout等事件操作，那么如何在单元测试中触发这些事件呢？触发input事件，需要在获取到input元素后，先给输入框绑定值，然后去触发输入事件，最后更新视图。

jsonwoo / 0评论 2020-01-20

Angular学习系列八：调用服务方法

import { Injectable } from ‘@angular/core‘;import { Observable } from ‘rxjs‘;var username = ‘xiao ming--callback‘;import { Compo

ZadarrienChina / 0评论 2020-01-07

前端框架

Angular、 React、Vue是目前三大主流的前端框架，这三个框架都有很好的性能，都支持数据绑定，组件等基本功能。这是第一次在2010年10月发布。React由Facebook开发和维护。但是会丢失一些灵活性。这个时候，小巧的vue就成了首选。生态虽

wwwxuewen / 0评论 2020-01-04

抛弃所有，选择Angular的3个理由

2020年来了，在前端开发中，大多数人仍然在大肆宣传React框架。他们鼓吹React多么强大，能用于网页、桌面和移动开发，广受许多大公司青睐。而在笔者心中，在尝试了Vue和React后，Angular仍一直是那抹无法磨灭的白月光。接下来，笔者将和大家简单

dynsxyc / 0评论 2020-01-03

web前端开发ReactJS，AngularJS, Vue.js优劣对比分析

在全球大范围看，React和Angular依然遥遥领先，Vue.js这位后起之秀还需努力做到全球化！为了保证可读性，本文采用意译而非直译。JavaScript框架的更新节奏可以说日新月异，我们可以看到Angular不停地在发布新的版本，ReactJS和Vu

liangjielaoshi / 0评论 2019-12-27

总结下html、css的一些东西

CSS，JS各有哪些流行的库？组件是组成页面中最基本的元素，按钮，输入框，下拉选择都是组件，组件和组件组合就变成了一个更复杂的组件。库的典型功能包括处理字符串，日期，HTML DOM元素，事件，Cookie，动画，网络请求等。通常框架提供事件。存储和数据绑

bowean / 0评论 2019-12-27

前端如何入门面对传统的html，css，js，三大框架react，vue，angular？

并且Jquery这种插件也基本被废弃，nginx，linux相关知识。看看这些公司招聘需求，

wwwxuewen / 0评论 2019-12-25

Web前端三大架构React、Angular与Vue全面比较

本文将和您一起探究React、Angular和Vue三种前端架构的不同优劣势，以及各自适用的使用场景。Angular是Google提供的一种开源的前端Web应用程序框架。它不但适用于构建具有高活跃性和交互性的Web应用场景，还广受单页面式应用程序的欢迎。但

liwusen / 0评论 2019-12-16

前端架构React、Angular与Vue的终极比较

本文将和您一起探究React、Angular和Vue三种前端架构的不同优劣势，以及各自适用的使用场景。Angular是Google提供的一种开源的前端Web应用程序框架。通过其模型-视图-控制器式的架构，开发人员能够轻松地进行各种开发、维护和测试。由Fac

颤抖吧腿子 / 0评论 2019-12-16

jquery与angular的交互

<td><a title="立即拍照" href="#" class="ljpz"><i class="fa fa-camera"><

donghongbz / 0评论 2019-12-14

karma mocha angular angular-mock 测试

karma.conf.js 配置karma 运行时环境，加载angular admin模块，需要引入angular.js等，类似正常开发过程中引入文件

87510796 / 0评论 2019-12-01

详解Angular Karma测试的持续集成实践

使用Angular + Karma + Jasmine可以进行前端的单体测试，从前面的文章中我们了解到了Karma的工作原理，它会启动一个指定种类的浏览器，然后在此浏览器中运行测试用例。如果需要进行持续集成，比如结合Jenkins或者其他方式进行自动化的测

83394193 / 0评论 2019-11-15

angularjs笔记

最近在用angularjs进行项目的前端开发，深深的体会到了angular双向绑定的优势和便捷，但也遇到了一些小小的问题，但我进入某个页面的时候，前一次在此页面输入的值竟然存在，这让我意识到某些时候给双向绑定的数据进行初始化是有必要的。

sanlingwu / 0评论 2014-04-11

有jQuery背景的开发者如何建立起AngularJS的思维模式？

在jQuery中，你通常会设计一个页面，然后再给它动态效果。这是因为jQuery的设计就是为了扩充DOM并在这个简单的前提下疯狂的生长的。但是在AngularJS里，必须从头开始就在头脑中思考架构。必须从你想要完成的功能开始，然后设计应用程序，最后来设计视

zfjdoreen / 0评论 2014-04-10

Angular7 中使用 svg sprite

看到项目中很多svg，使用方法都是使用img标签引入。于是就想将svg合并，像字体图标那样方便使用。在网上了解到可以将众多svg文件合并成一个，用symbol+id的方式区分不同的svg图案，然后使用use 标签引用。也就是说，要想兼容ie，就必须要把合成

codebiubiu / 0评论 2019-11-17

publish dotnet core angular spa app to docker

公司一个使用Angular开发的应用准备下个版本使用.Net Core开发后台, 刚好可以用到.Net Core Angular Spa模板, 而且最近也在学习Docker, 于是就想把它融汇贯通, 之前往Docker上部署过.Net Core MVC的应

小爷有点狂 / 0评论 2019-11-10

AngularJS(4)YeoMan

AngularJS(4)YeoManFind a lot of Useful resources.References:Experience for PhoneCathttp://sillycat.iteye.com/blog/2007538http://

84741998 / 0评论 2014-06-07

Angular架构学习

Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言，来构建客户端应用的框架。用 Angular 扩展语法编写 HTML?模板， 用组件类管理这些模板，用服务添加应用逻辑， 用模块打包发布组件与服务

ithzhang / 0评论 2019-11-06

从web端开发到app端开发也许只有一个Flutter MVVM的距离

只所以选择Angular是因为Angular中的很多理念对一个曾经的后端开发来说并不陌生，甚至还会带有几分亲切，Module、依赖注入、守卫、provider等等，每一项都那么熟悉。但是，除了这些最能吸引到我的更是她优雅的数据绑定功能，Angular的数据

chaoxiao / 0评论 2019-11-04

AngularJS自定义表单验证功能实例详解

本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考，具体如下：。Angular实现了大部分常用的HTML5的表单控件的类型，也实现了很多指令做为验证。为了取得这个controller对象，我们需要requirengModel指令。在$

雅特岚蒂斯 / 0评论 2018-08-24

Spring Boot/Angular整合Keycloak实现单点登录

Keycloak为现代应用和服务提供开源的认证和访问管理，即通常所说的认证和授权。Keycloak支持OpenID、OAuth 2.0和SAML 2.0协议；支持用户注册、用户管理、权限管理；支持代理OpenID、SAML 2.0 IDP，支持GitHub

missok / 0评论 2019-10-30

angular之模块开发二

CMD实现-seaJS创始人是阿里巴巴前端架构师玉伯；js文件的依赖管理、异步加载、方便前端的模块化开发。AMD实现-RequireJS，James Burke AMD规范的创始人；与SeaJS 基本实现类似的功能。① 对于依赖的模块，AMD是提前执行，C

GhostStories / 0评论 2019-10-28

angular引入bootstrap和jquery

　　　　npm install --save jquery. 　　　　npm install bootstrap --save

80437916 / 0评论 2019-10-22

关于rxjs subject订阅分发实现Angular的全局数据管理与同步更新

Subject 数据的订阅与分发，结合报刊的发布与订阅进行功能的模拟，subject即是observeable对象也是observer对象，subject对于后期没有数据更新时所添加的订阅者是不怎么友好的，因为不跟新数据时订阅者就不在收到返回的数值。beh

wcsandlili / 0评论 2019-10-22

angularjs link compile与controller的区别详解，了解angular生命周期

我在 angularjs 一篇文章看懂自定义指令directive一文中简单提及了自定义指令中的link链接函数与compile编译函数，并说到两者具有互斥特性，即同时存在link与compile时link不生效。我们已经知道编译函数compile与链接函

Frankywls / 0评论 2019-10-19

2019年流行的JavaScript框架

如今的前端开发，如果你不会几个框架，真不敢行走江湖了。那么在2019年，那些JS框架比较流行了，除了三大框架外，还有那些框架有崛起之势呢?事不宜迟，我们接下来就介绍2019年很受欢迎的JavaScript框架!React是由Facebook创建并维护的框架

sfkong / 0评论 2019-10-21

Angular、Vue、React和前端的未来

最近社区针对框架的争论，从发文互怼再到粉丝站队再到大漠穷秋准备离职，令人唏嘘不已。不知从何而起，前端圈已经逐步变成了前端娱乐圈。越来越多的人开始站队 Angular、Vue、React，仅仅围绕这些库或者框架进行前端技术讨论，这实在不是什么好的现象。其

Herorong / 0评论 2019-10-16

AngularJS项目中遇到的问题

This is probably not a problem with npm. There is likely additional logging output above.A complete log of this run can be found

大数据小菜 / 0评论 2019-10-14

初探angularjs 之helloworld

上例代码是ng-model：绑定一个模板类型yourname,在文本框中输入数据就能马上显示出来，不需要绑定事件

MrWhite0 / 0评论 2014-07-09

AngularJS读取模板html页面中的数据

在angular的controller中， 如果想读取html页面中某个<input id="myid"ng-model="modelName" value="v"/>的value值时

云帆大数据 / 0评论 2014-07-09

认识AngularJS Directive

指令是我们用来扩展浏览器能力的技术之一。在DOM编译期间，和html关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变它的DOM结构。指令可以作为元素名，属性名，类名，或者注释。这个方法会遍历DOM，并对指令进行匹配。如果匹配成功

LDN0 / 0评论 2014-07-02

项目中用Yeoman构建AngularJS

5. add files in .gitignore to your svn ignore list

84741998 / 0评论 2015-04-08

将BootstrapJS和AngularJS结合使用以及为什么不用jQuery

在很多项目中，它们需要一起使用。他们已经改变了CSS和JS的开发方式，让前端既成为令人难以置信的工具。但是，把它们放在一起使用还有一些问题，特别是当你试图在Angular的项目中引入Bootstrap JavaScript组件时，会是一个问题。这是因为把j

86453967 / 0评论 2015-12-22

angular---输入属性

<div [mydata]='val'></div>//error:输入属性只能绑定在组件dom上

iiichigo / 0评论 2019-09-24

Angularjs问题总结

在使用Angularjs做验证的时候使用jquery或者其他方式直接给input赋值不能通过Angularjs的验证，报错如下Error: [ng:areq] Argument 'brandController' is not a function, go

youyouzouzou / 0评论 2015-08-24

TypeScript中使用getElementXXX()的示例代码

Angular 1.x版本是用JavaScript编写的，我们在百度Angular经常会搜索到AngularJS，并不是JavaScript的什么衍生版本，就是Angular 1.x。在后续版本中，改用TypeScript来重写了Angular框架。改动较

古帝 / 0评论 2019-09-12

解析vue、angular深度作用选择器

在 Vue 的开发中，我们经常会用到外部组件库，例如 element，当使用 element 组件库中的某一个组件的时，我们可能会希望有一些定制的地方，通常的做法是 用CSS覆盖；有时层级不够就要另辟他径。对你编写的每个 Angular 组件来说，除了定义

CCCSSSDNNN / 0评论 2019-09-11

angular之启动

目前没写javascript的吐槽，以后会写。上面代码在 angular.js文件最后几行，当所有的angular代码执行完毕，就执行启动。看下说明angular如何自动化加载的。var elements = [element],//扫描到的节点，docu

GUAOSHITAIDU / 0评论 2016-04-25

为什么选择AngularJS前端框架

简单来说，展示型网站用 jQuery，数据操作较多的用 Angular.js等前端MVC框架。展示型网站需要 JS 的地方一般是单个点，实现的功能一般是事件响应、DOM 操作等局部操作。这些操作更加关注 DOM 层面的细节。数据操作较多的网站需要用 JS

前端架构师 / 0评论 2016-04-15

AngularJS表单验证实现方法详解

本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识，希望通过本文的分享，对大家学习AngularJS有所帮助。<label>编号</label><input type="text" na

SakuraLu / 0评论 2016-11-25