Angular.js入门的样例
感觉这下子，前端的路也宽多了，从容不迫了。
因为可控制的节点又推前了，
有空了好好学一下。
然后结合EXPRESS或METEOR，是不是有点爽？
参考URL：
https://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="js/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<body ng-app="myApp">
<div >
<div ng-controller="MainCtrl">
{{ text }}
<p> {{ data1.length > 0 && 'My data' || 'No data' }} </p>
<p> {{ data2.length > 0 && 'My data' || 'No data' }} </p>
<ul>
<li ng-repeat="number in numbers | filter:oddNumber">
{{ number }}
</li>
<input type="text" ng-model="myModel" placeholder="Start typing..." />
<p>My model data: {{ myModel }} </p>
<li ng-repeat="number in numbers | filter:greaterThanNum">
{{ number }}
</li>
</ul>
</div>
<div ng-controller="XHRCtrl">
{{ ubb.ubbname }}
<a href="" ng-click="toggle = !toggle">Toggle nav</a>
<ul ng-show="toggle">
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
<li>LINK 4</li>
</ul>
</div>
<div ng-controller="EmailCtrl">
<ul>
<li ng-repeat="message in emails.messages">
<p>From: {{ message.from }}</p>
<p>Subject: {{ message.subject }}</p>
<p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
<a ng-click="deleteEmail($index)"> Delete email </a>
</li>
</ul>
</div>
<div ng-controller="MathCtrl">
{{ result }}
</div>
<div ng-controller="FacCtrl">
{{ result }}dgf
</div>
<div ng-controller="FilCtrl">
<p>No filter: {{ greeting }}</p>
<p>Reverse: {{ greeting | reverse }}</p>
</div>
<div ng-controller="UserCtrl">
<p class="username"> Welcome, {{ user.details.username }} </p>
<p class="id">User ID: {{ user.details.id }} </p>
</div>
<a custom-button>Click me</a>
</div>
</body>
</html>
js
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.text = "Heloo, Angular fanitic.";
$scope.numbers = [10, 25, 35, 45, 60, 80, 100];
$scope.lowerBound = 42;
$scope.greaterThanNum = function(item) {
return item > $scope.lowerBound;
};
$scope.myModel = '';
$scope.data1 = [];
$scope.data2 = "my dole data";
}]);
myApp.controller('XHRCtrl', ['$scope', '$http', function($scope, $http) {
$scope.ubb = {};
$scope.ubb.ubbname = '';
$http({
method: 'GET',
URL: 'http://127.0.0.1/templates/customButton.html'
})
.success(function(data, status, headers, config) {
$scope.ubb.ubbname = 'from ajax data';
})
.error(function(data, status, headers, config) {
$scope.ubb.ubbname = 'from ajax error data';
});
}]);
myApp.controller('EmailCtrl', ['$scope', function($scope) {
$scope.emails = {};
$scope.emails.messages = [{
"from": "Steve Jobs",
"subject": "I think I'm holding my phone wrong.",
"sent": "2015-12-01T08:05:59Z"
}, {
"from": "Ellie Goulding",
"subject": "I got Starry Eyes. lulz",
"sent": "2015-11-01T08:05:59Z"
},{
"from": "Michal Stipe",
"subject": "Everybody hurts, simteime",
"sent": "2015-11-05T08:05:59Z"
}];
$scope.deleteEmail = function(index) {
$scope.emails.messages.splice(index, 1);
};
}]);
myApp.controller('UserCtrl', ['$scope', function ($scope) {
$scope.user = {};
$scope.user.details = {
"username": "Chen Gang",
"id": "8910112"
};
}]);
myApp.service('Math', function() {
this.multiply = function(x, y) {
return x * y;
};
});
myApp.controller('MathCtrl', ['$scope', 'Math', function($scope, Math) {
var a = 12;
var b = 245;
var result = Math.multiply(a, b);
$scope.result = result;
}]);
myApp.factory('Server', ['$http', function($http) {
return {
get: function(URL) {
return $http.get(URL);
},
};
}]);
myApp.controller('FacCtrl', ['$scope', 'Server', function($scope, Server) {
var jsonGet = 'http://127.0.0.1/templates/customButton.html';
Server.get(jsonGet);
}]);
myApp.filter('reverse', function() {
return function(Input, uppercase) {
var out = '';
for(var i = 0; i < Input.length; i++) {
out = Input.charAt(i) + out;
}
if(uppercase) {
out = out.toUpperCase();
}
return out;
}
});
myApp.controller('FilCtrl', ['$scope', function($scope) {
$scope.greeting = 'Todd Motto';
}]);
myApp.directive('customButton', function() {
return {
restrict: 'A',
replace: true,
transclude: true,
template: '<a href="http://www.baidu.com" class="myawesomebutton" ng-transclude>' +
'< i class="icon-ok-sign"><i>' +
'</a>',
link: function(scope, element, attrs) {
}
};
});
截图：
Angular.js入门的样例的更多相关文章
- 【Unity 3D 游戏开发】Unity3D 入门 - 工作区域介绍 与 入门演示样例
一. 工作区域具体解释 1. Scence视图 (场景设计面板) scence视图简单介绍 : 展示创建的游戏对象, 能够对全部的游戏对象进行 移动, 操作 和 放置; -- 演示样例 : 创建一个球 ...
- Angular.js 入门（一）
最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...
- 移动端报表JS开发演示样例
近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...
- Angular.js入门
一.引入angular.js <script type="text/javascript" src="../plugins/angularjs/angular.m ...
- Angular.js入门教程
简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.首先Html是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. 通常,我们可以通过以下技术来解 ...
- angular.js 入门
1.安装nodejs 首先要安装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题. 没有安装的直接去nodejs官网下载nodejs安装.安装过程很简单,官网有教程. 安 ...
- 一些常用的js，jquerry 样例
1 设置属性 $(document).attr("title", str) 2 删除属性在增加属性 $("#" + bottonname).remo ...
- Angular JS + Express JS入门搭建网站
3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...
- Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
随机推荐
- JAVA生成EXCEL图表
跟据客户的要求,需要开发一套包括图形的报表,还需要导出WORD 图表需要这样: 这样: 这样: 还有这样: 接下来是实现思路: 以往用的最多的就是JFreechart,手上也有实现各种图形的资源,但是 ...
- ### C++总结-[类的继承]
面向对象中关于继承的总结. #@author: gr #@date: 2015-07-26 #@email: forgerui@gmail.com 一.类的隐藏 重载(overload).覆盖(ove ...
- OC10_数组的内存管理
// // main.m // OC10_数组的内存管理 // // Created by zhangxueming on 15/6/18. // Copyright (c) 2015年 zhangx ...
- html笔记——网页中视频播放，文字滚动
转载地址:http://blog.chinaunix.net/uid-191945-id-2792153.html <代码1无限次播放> <EMBED src="地址&qu ...
- Contest1065 - 第四届“图灵杯”NEUQ-ACM程序设计竞赛（个人赛）G爬楼梯
题目描述 由于第m个台阶上有好吃的薯条,所以薯片现在要爬一段m阶的楼梯. 薯片每步最多能爬k个阶梯,但是每到了第i个台阶,薯片身上的糖果都会掉落ai个,现在问你薯片至少得掉多少糖果才能得到薯条? 输入 ...
- a2x
#include <typeinfo> template <typename T> bool a2x( T& _f , char* p) { if( !p ) retu ...
- xamarin android——数据绑定到控件（二）
本示例为通过媒体内容提供器获取本机中的图片显示在Gallery中. 活动中简单的初始化代码 private void InitGallery() { Gallery gallery = FindVie ...
- 在.NET连接MySQL以及封装好的MySQLHelper.cs
1.首先上MySQL网站下驱动:http://www.mysql.com/products/connector/ 2.安装下载的安装包 3.我们在Visual Studio里创建一个Web Appli ...
- ASP.NET 发送电子邮件简介
1.补充知识 (1)POP3和SMTP服务器是什么? 简单点来说:POP3 用于接收电子邮件 ,SMTP 用于发送电子邮件. (1)POP3具体指什么? POP3(Post Office Protoc ...
- 同时存在两个或多个homestead 虚拟box
开发中发现,不同版本的homestead 里面的环境各不相同,里面的node,npm等版本都不一致,如果需要添加 不同版本的homestead同时存在可以按照以下办法处理. tips: 提供可以离线下 ...