angularJs 初识

1.angularInit 初始化

页面中是否有ng-app指令,如果有的话,则启动;若果没有的话,则需要手动启动。

自动启动:

  if (appElement) {//如果appelement存在,则执行。
    bootstrap(appElement, module ? [module] : []);

  }

2.provider与injector

1.依赖注入

ng中最简单的依赖是内联注入,它还有2种,分别为推断式注入和标注式注入。

直接使用$injector。 *一般很少使用。

 

推断式注入:

var myModule = angualr.module("myModule", []);

var ctrl = function($scope) {

 $scope.name = "2222";

}

myModule.controller("ctrl", ctrl); 

 

标注式注入:

var myModule = angualr.module("myModule", []);

var ctrl = function(name) {

 name = "2222";

}

ctrl.$inject = [‘$scope‘];

 

注射器Injector:

var myModule = angualr.module("myModule", []);

 

myModule.factory(‘game‘, function() {

    return {

        ganmeName: ‘11111‘

}

}

myModule.controller(‘Myctrl‘, [‘$scope‘, ‘$injector‘,

function($scope, $injector) {

    $injector.invoke(function(game) {

    console.log(game.gameName);    

]);

}

});

 

Provider模式与ng实现:

Provider模式是策略模式和工厂模式的综合体;

核心目的是为了让接口和实现分离;

在ng中,所有provider都可以用来进行注入:

provider/factory/service/constant/value

一下类型的函数可以接受注入:

controller/directive/filter/service/factory德国

在ng中的“依赖注入”是欧诺个过provider和ijector这2个机制联合实现;

 

var myModule = angular.module("myModule", []);

myModule.provider("HelloAngular", function() {

    return {

        $get: function() {

        var name="sss";

       function getName() {

    return name;

}

return {

    getName: getName

}

}

    }

    });

myModule.controller(‘MyCtrl‘, [‘$scope‘, ‘HelloAngualr‘,

function($scope, HelloAngualr) {

    $scope.gameName = helloAngualr.getName();

}])

 

时间: 2024-10-28 20:04:21

angularJs 初识的相关文章

AngularJs初识

一.什么是 AngularJS? AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易. AngularJS 把应用程序数据绑定到 HTML 元素. AngularJS 可以克隆和重复 HTML 元素. AngularJS 可以隐藏和显示 HTML 元素. AngularJS 可以在 HTML 元素"背后"添加代码. AngularJS 支持输入验证. AngularJS 是一个 JavaScript 框架.它可通

AngularJS 初识笔记

test.html: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div ng-controller="HelloAngular"> <p>{{greet

AngularJs(2)

<!doctype html> <!-- 要在这里引用模块名 --> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>AngularJs初识2</title> <!--引入AngularJs的文件--> <script type="text/javascript&qu

深究angularJS系列 - 初识

AngularJS是什么?概念?特征?优点?缺点?那都不是事,话不多说,直接搞起O(∩_∩)O~~ 安装 1.官网http://angularjs.org/下载安装 2.开源库http://www.bootcdn.cn/下载安装 3.bower(一种包管理器)下载安装 bower install angular MVC MVC即"模型 - 视图 - 控制器"的简称,一种设计模式,MVC的从逻辑上将代码清晰地分割为三层,这样可以对每个部分进行独立开发.测试和维护. 模型/Model -

初识Angularjs示例

初识Angularjs使用了官方的示例代码 模板: <html ng-app>    <head>       <script src="/angular/angular.js"></script>       <script src="/angular/controllerjs/controllers.js"></script>   </head>   <body ng-co

初识AngularJs

今天看看angular.文章将从三个大的部分来说,第一部分什么是angular,第二部分,初次使用时需要注意的一些事项,第三部分,angular基础概念: 一,什么是AngularJs? AngularJs是为了克服html在构建应用上的不足而设计的,它是一个JavaScript框架.通过使用我们称为标识符的结构,让浏览器能够识别新的语法.例如使用{{}}进行数据绑定. AngularJs通过为开发者呈现一个更高层次的抽象来简化应用开发,这在带来方便的同时也导致灵活性的降低.AngularJs主

AngularJS自学之路——初识AngularJS和数据绑定

AngularJS 是什么 AngularJS的官方文档是这样介绍它的.完全使用JavaScript编写的客户端技术.同其他历史悠久的Web技术(HTML.CSS和JavaScript)配合使用,使Web应用开发比以往更简单.更快捷. AngularJS主要用于构建单页面Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架. AngularJS使开发Web应用变得

前端 初识angularJS的基本概念

今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大.作为一个前端开发人员,我们要对新知识不断地学习,不断的充电,对待新知识不断地渴望,学习新技术是我们每一位程序员的必备功课,这样我们才不会被潮流淘汰掉.希望今后的日子里,能和各位博友和大神们在技术上共勉! 什么是angularJS? 它是一个用于设计动态web应用的结构框架,首先它是一个框架,不是像Query这

1 初识AngularJs

    阅读目录 1 表达式 2 指令 3 控制器 4 过滤器 5 http 6 表格 7 html dom 怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习.这次正好学习AngularJS,直接复习一下前端的知识.目前这里还是弱点,慢慢深入的学习. AngularJS是Google的优秀的前端框架,目前已经应用于多个产品. 通过w3cschool.cc的学习,简单的了解了下它的使用方法,但是对于原理还