angularjs案例代码（前端开发angular）

本篇文章给大家谈谈angularjs案例代码，以及前端开发angular对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、如何在angularjs NG
• 2、如何利用AngularJS打造一款简单Web应用
• 3、谁能提供个angularjs开发的项目案例？
• 4、如何看angularjs源代码
• 5、谁有混淆Angularjs代码的经验
• 6、如何使用angularjs处理动态菜单

如何在angularjs NG

指令，我将其理解为AngularJS操作HTML element的一种途径。 

由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点，所以指令早已不陌生。

【内置指令】

所有的内置指令的前缀都为ng，不建议自定义指令使用该前缀，以免冲突。

首先从一些常见的内置指令开始。先列出一些关键的内置指令，顺便简单说说作用域的问题。

［ng-model］

将表单控件和当前作用域的属性进行绑定，这么解释似乎也不太正确。

但先不要管咬文嚼字，用起来倒是易懂，例如:

input type="text" ng-model="someModel.someProperty" /br

{{someModel.someProperty}}

［ng-init］

该指令被调用时会初始化内部作用域。

这个指令一般会出现在比较小的应用中，比如给个demo什么的...当然也可以作为双向数据绑定时候 设置默认值

div ng-init="job='fighter'"

   I'm a/an {{job}}

/div

［ng-app］

每一次用AngularJS都离不开这个指令，顺便说下$rootScope。

声明了ng-app的元素会成为$rootScope的起点，而$rootScope是作用域链的根，通常声明在html你懂的。

也就是说根下的作用域都可以访问它。

但是，不建议过度使用$rootScope，免得全局变量满天飞，效率又差又难管。

下面是一个例子:

html ng-app="myApp"

body

   {{ someProperty }}

/body

script

var myApp = angular.module('myApp', [])

.run(function($rootScope) {

   $rootScope.someProperty = 'hello computer';

});

/script

/html

ng-controller

我们用这个指令在一个DOM元素上装上controller。

ng-controller必须有一个表达式作为参数，另外通过$scope来继承上级$scope的方法和属性什么的，$rootScope也包括在内。

下面只是一个简单的例子，ancestor无法访问child的作用域。

div ng-controller="AncestorController"

   {{ ancestorName }}

   {{ childName }}

   div ng-controller="ChildController"

       {{ ancestorName }}

       {{ childName }}

   /div

/div

script

var myApp = angular.module('myApp', [])

.controller('ChildController', function($scope) {

   $scope.childName = 'child';

})

.controller('AncestorController', function($scope) {

   $scope.ancestorName = 'ancestor';

});

/script

ng-form

起初不明白为什么会有个表单指令，form标签感觉也够用啊。

以表单验证为例，在上一篇中有这么一段代码:

input type="submit" ng-disabled="mainForm.$invalid" /

也就是表单的状态为$invalid时禁用提交按钮。

如果场景再稍微复杂一点点，比如一个父表单中有多个子表单，子表单中有3个验证通过时父表单便可以提交。

但是，form是不可以嵌套的。

考虑到这种场景，我们便使用ng-form指令来解决这一问题。

例如:

form name="mainForm" novalidate

   div ng-form="form1"

       姓名:input type="text" ng-required="true" ng-model="name"/br

       证件号码:input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/

   /div

   br

   div ng-form="form2"

       监护人姓名:input type="text" ng-required="true" ng-model="gname"/br

       监护人证件号码:input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/

   /div

   button ng-disabled="form1.$invalid form2.$invalid"submit all/button

/form

ng-disabled

像这种只要出现则生效的属性，我们可以在AngularJS中通过表达式返回值true/false令其生效。

禁用表单输入字段。

textarea ng-disabled="1+1==2"1+1=?/textarea

ng-readonly

通过表达式返回值true/false将表单输入字段设为只读。

弄个例子，3秒后变成只读.

input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/

.run(function($rootScope,$timeout){

   $rootScope.stopTheWorld=false;

   $timeout(function(){

       $rootScope.stopTheWorld = true;

   },3000)

})

ng-checked

这个是给input type="checkbox" /用的，比如..

input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty"

ng-selected

给select里面的option用的，例子:

label

   input type="checkbox" ng-model="isFullStack"

   I'm Full Stack Engineer

/label

select

   optionFront-End/option

   optionBack-End/option

   option ng-selected="isFullStack"Full Stack !!!/option

/select

ng-show/ng-hide

根据表达式显示/隐藏HTML元素，注意是隐藏，不是从DOM移除，例如:

div ng-show="1+1 == 2"

   1+1=2

/div

div ng-hide="1+1 == 3"

   you can't see me.

/div

ng-change

不是HTML那套onXXX之类的，而是ng-XXX。

结合ng-model使用，以ng-change为例:

input type="text" ng-model="calc.arg"  ng-change="calc.result = calc.arg*2" /

   code{{ calc.result }}/code

或者比如ng-options

{{}}

其实这个也是一个指令，也许觉得和ng-bind差不多，但页面渲染略慢时可能会被看到。

另外，{{}}的performance远不如ng-bind，只是用起来很方便。

ng-bind

ng-bind的行为和{{}}差不多，只是我们可以用这个指令来避免FOUC(Flash Of Unrendered Content)，也就是未渲染导致的闪烁。

ng-cloak

ng-cloak也可以为我们解决FOUC。 ng-cloak会将内部元素隐藏，直到路由调用对应的页面。

ng-if

如果ng-if中的表达式为false，则对应的元素整个会从DOM中移除而非隐藏，但审查元素时你可以看到表达式变成注释了。

如果相进行隐藏，可以使用ng-hide。

div ng-if="1+1===3"

   无法审查到该元素

/div

div ng-hide="1+1==2"

   可审查

/div

ng-switch

单独使用没什么意思，下面是例子:

div ng-switch on="1+1"

   p ng-switch-default0/p

   p ng-switch-when="1"1/p

   p ng-switch-when="2"2/p

   p ng-switch-when="3"3/p

/div

ng-repeat

是遍历集合，给每个元素生成模板实例，每个实例的作用域中可以用一些特殊属性，如下:

$index

$first

$last

$middle

even

odd

ul

   li ng-repeat="char in

   [{'alphabet': 'K'},

   {'alphabet': 'A'},

   {'alphabet': 'V'},

   {'alphabet': 'L'},

   {'alphabet': 'E'},

   {'alphabet': 'Z'}] " ng-show="$even"{{char.alphabet}}/li

/ul

ng-href

起初我在一个文本域中弄了个ng-model，然后像这样a href="{{myUrl}}"在href里面写了进去。

其实这样href和ng-href看不出什么区别，所以我们可以试试这样:

ul ng-init="myHref=''"

   lia ng-href="{{ myHref }}"{{linkText}}/a/li

   lia href="{{ myHref }}"可以点击，但不一定是正确的地址/a/li

/ul

.run(function($rootScope, $timeout) {

   $rootScope.linkText = '尚未加载，您无法点击';

   $timeout(function() {

       $rootScope.linkText = '请点击'

       $rootScope.myHref = '';

   }, 2000);

})

ng-src

大同小异，即表达式生效前不要加载该资源。

例子(ps: 图片不错! ):

img ng-src="{{imgSrc}}"/

.run(function($rootScope, $timeout) {

   $timeout(function() {

       $rootScope.imgSrc = '';

   }, 2000);

})

ng-class

用作用域中的对象动态改变类样式，例如:

style

   .red {background-color: red;}

   .blue {background-color: blue;}

/style

div ng-controller="CurTimeController"

   button ng-click="getCurrentSecond()" Get Time!/button

   p ng-class="{red: x%2==0,blue: x%2!=0}" Number is: {{ x }}/p

/div

.controller('CurTimeController', function($scope) {

   $scope.getCurrentSecond = function() {

       $scope.x = new Date().getSeconds();

   };

})  

如何利用AngularJS打造一款简单Web应用

在着手利用AngularJS创建这款简单的小Web应用之前，大家首先需要下载angular-seed项目。下载完成之后，大家需要打开对应的下载目录并安装其中的关联性以实现运行。具体代码如下所示：

$ cd angular-seed $ npm install ## Install the dependencies

下一步则是利用以下代表启动节点服务器：

$ npm start ## Start the server

节点服务器启动并开始运行之后，我们需要打开浏览器并访问，此时其中会显示正在运行的默认应用。

接下来访问angular-seed项目文件夹下的该应用目录，应用程序的代码就保存在这里。

作为该应用程序的核心，app.js也将存放在该应用文件夹内。所有应用层级的模块与app.js内的路由都需要进行声明。

另外，大家还会在这里找到angular-seed的两个视图，即view 1与view 2。它们始终以默认形式存在。我们需要在应用文件夹中将这些视图删除。

现在开始我们要从零开始创建应用程序了：大家首先需要打开app.js并删除其中的全部已有代码。在app.js当中定义我们的应用程序路由，这要求大家使用ngRoute，AngularJS当中的模块之一。默认情况下app.js并不包含该模块，因此我们需要手动将其注入至应用程序当中从而加以使用。大家可以利用以下代码完成该AngularJS模块的添加工作：

angular.module('myApp', [

'ngRoute'

])

ngRoute模块将带来一项重要的组件，即$routeProvider，其能够完美地对路由进行配置。我们需要使用以下代码将$routeProvider注入至angular-module的配置方法当中，从而完成路由定义：

'use strict';

angular.module('myApp', [

'ngRoute'

]).

config(['$routeProvider', function($routeProvider) {

// Routes will be here

}]);

完成以上步骤后，现在我们就可以打开index.html了。将index.html当中的全部内容清除，只保留脚本引用以及div。

每一次进行路由变更时，我们都需要按照以上方法对div内容进行调整。

在视图当中创建符号

我们需要在app目录当中创建一个新的文件夹并将其命名为home。在该文件夹当中，我们额外再创建两个文件夹，分别为home.js与home.html。首先打开home.html并将以下代码添加进去：

!DOCTYPE html html lang="en" ng-app="myApp" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" link rel="icon" href="" titleAngularJS Firebase Web App/title link href="" rel="stylesheet" link href="" rel="stylesheet" link href="justified-nav.css" rel="stylesheet" /head body div class="container" div class="jumbotron" style="padding-bottom:0px;" h2AngularJS Firebase App!/h2 /div form class="form-signin" role="form" input type="email" class="form-control" placeholder="Email address" required="" autofocus="" input type="password" class="form-control" placeholder="Password" required="" label class="checkbox" a href="#" Sign Up/ /label button class="btn btn-lg btn-primary btn-block" type="submit"Sign in/button /form /div /body/html

在home.js当中，我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示：

use strict'; angular.module('myApp.home', ['ngRoute']) // Declared route .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/home', { templateUrl: 'home/home.html', controller: 'HomeCtrl' }); }]) // Home controller .controller('HomeCtrl', [function() { }]);

现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：

'use strict'; angular.module('myApp', [ 'ngRoute', 'myApp.home' // Newly added home module ]). config(['$routeProvider', function($routeProvider) { // Set defualt view of our app to home $routeProvider.otherwise({ redirectTo: '/home' }); }]);

如果大家希望显示自己的home页面，则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作，请打开index.html文件并湢以下代码：

script src="home/home.js"/script

现在一切工作已经完成，该应用随时准备加以运行了！要开始使用这款应用，我们需要重启服务器并将自己的浏览器指向以访问登入页面，在这里大家可以实现对该应用程序的访问。

如果大家需要使用Firebase（具体理由如前文所述），则需要首先创建一个Firebase账户。在账户创建完成后，我们将屏幕上所显示的已创建应用url添加进来，而后点击“管理该应用”。

谁能提供个angularjs开发的项目案例？

自己设计一个小的应用，然后用angular做出来。去看别人的项目不如直接自己做。比如做个在线聊天的SPA，用node做后台把socket也练了。整体不难，但有很多空间。比去看别人代码好多了。

如何看angularjs源代码

angular的源代码可以去官网下载，然后保存到本地查看。

工具原料：浏览器、编辑器

1、首先打开angular的官网下载angular的原文件，或者在其他的途径下载也是可以的。

2、然后点击download下载angular的原文件并保存到本地。

3、然后使用编辑器打开即可看到angular的源代码了。

谁有混淆Angularjs代码的经验

由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。所以如果你要压缩控制器的JS代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了。

假如我们的Controller的名称为：BookCtrl，压缩前的代码为：

var BookCtrl = function($scope, $http) { /* constructor body */ };

为了克服压缩引起的问题，只要在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组：

BookCtrl.$inject = ['$scope', '$http'];

另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制器：把要注入的服务放到一个字符串数组（代表依赖的名字）里，数组最后一个元素是控制器的方法函数：

var BookCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

上面提到的两种方法都能和AngularJS可注入的任何函数完美协作，要选哪一种方式完全取决于你们项目的编程风格，建议使用数组方式

如何使用angularjs处理动态菜单

angularjs处理动态菜单的实现方法：

1、核心angularjs代码：

var testImg=angular.module("appTest",["ms.leafMenu"])

.controller('testCtr',['$scope',function($scope){

$scope.data=[{"id":"1","pid":"0","name":"第一行","children":[{"id":"3","pid":"1","name":"第一行1.1"},{"id":"4","pid":"1","name":"第一行1.2"}]},{"id":"2","pid":"0","name":"第二行","children":[{"id":"5","pid":"2","name":"第二行2.1"}]}];

}]);

angular.module("ms.leafMenu",[])

.directive('msLeafMenu',['$compile',function($compile){

return {

restrict:'EA',

transclude: true,

replace: false,

//template:"li/li",

scope:{

data:'=?',

id:'@?',

pid:'@?',

pvalue:'@?',

showname:'@?',

isstandard:'@?'

},

link:function(scope,element,attrs,leafController){

创建节点数据的方法：

function createTreeData(id,pid,pvalue){

var newData=[];

angular.forEach(scope.data,function(item,index){

if(item[pid]==pvalue){

var children=createTreeData(id,pid,item[id]);

if(children children.length0){

item.children=children;

}

newData.push(item);

}

});

return newData;

}

if(!scope.isstandard){

scope.data=createTreeData(scope.id,scope.pid,scope.pvalue);

}

//向节点增加数据

element.append($compile('ul class="ms_leaf_menu_group"li ng-repeat="row in data" ng-class="{ms_parent_item:(row.children row.children.length0),ms_child_item:(!row.children || row.children.length=0)}"div ng-click="toogle($index)"a {{row[showname]}}/aspan class="glyphicon" ng-class="{\'glyphicon-chevron-right\':(row.children row.children.length0 !row.isopen),\'glyphicon-chevron-down\':(row.children row.children.length0  row.isopen)}"  aria-hidden="true"/span/divdiv ng-show="row.isopen"ms-leaf-menu data="row.children" id="id" pid="pid" showname="{{showname}}" pvalue="{{row[id]}}"/ms-leaf-menu/div/li/ul')(scope));

//此处是关键，调用入口处，需要找到index

scope.toogle=function(index){

scope.data[index]["isopen"]=!scope.data[index]["isopen"];

}

}

}

}]);

/script

2、html代码：

body ng-app="appTest"

div ng-controller="testCtr" style=" width:200px; margin-left:auto; margin-right:auto;"

    ms-leaf-menu data="data" id="id" pid="pid" showname="name" pvalue="0"/ms-leaf-menu

   /div

/body

3、效果图

angularjs案例代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于前端开发angular、angularjs案例代码的信息别忘了在本站进行查找喔。