【angular】angular+yii2 前后端分离,但是yii2代理访问angular的url来控制权限访问

Continue Read..

这个月都没写博客,不是懒,居然加班了一个月,学习angularJs  然后做项目    每天早9晚12  居然习惯了(还戒掉了每天早上6点起床的坏毛病,点赞)

 

感谢各位新同事的帮助,还有其他朋友的帮助,就不一一点名了~~~

 

以后争取前后端框架通杀~

介绍下项目需求

前端:angularJs   后端 php(yii2)  提供接口

前后端 域名(端口一致)

开发的时候保证前后端完全分离,上线的时候前后端物理地址合并,yii2路由控制angular地址访问  

比如 我现在有静态地址是

http://www.xxx.com/views/views/xxx/index.html  (这个是angular的访问路径)

这个时候 我需要 这个地址能走yii的一个通用的路由  用来控制访问权限

 

实现思路:

1.angularJs 原项目地址 放到和 yii  web同级的目录下 然后执行 gulp  build 生成解析之后的 源文件

生成的源文件时

将js,css等文件放在web/views下面(稍后解释为什么放这里)

将html代码放在yii的视图文件下面 也就是 和web同级的 views 下  具体地址是 views/views   

这里要分2次放 

index.html 根文件 放在 views/ 下

其他html放在 views/views下

然后在yii的controller里面新建一个 ViewsController.php文件  

这里就解析下 刚才 js文件和html文件  为什么要放在 一个views的目录下面

用过yii的人应该知道 yii的访问模式是根据控制器调用 如果我有个views的控制器 那么默认访问的是 viwes/views的模板文件

 

 

好了 需求和实现已经介绍完毕 下面 是实现代码

环境 phpstudy   nginx+php6.5

首先nginx配置 

server {

    listen       80;

    server_name  rbacapi.game.ksyun.com;

    index index.html index.htm index.php;

    root   D:/work/rabc_ksyun.com/trunk/cpbackend/web;

 

    if (!-e $request_filename) {

        rewrite ^(.*)$ /index.php?r=$1 last;

#rewrite ^(.*)\.html$ /views/index last;

        break;

    }

 

 

#if ($request_filename ~* (.*)\.html ){

# rewrite ^/ /view/index last;

#}

 

#location ~ .*\.(html|htm)$ {

# rewrite ^(.*).html$ /views/index last;

#}

    location ~ .*\.(php|php5)?$ {

fastcgi_pass   127.0.0.1:9000;

fastcgi_index  index.php;

fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;

fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;

fastcgi_param  PATH_INFO  $fastcgi_path_info;

fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;

include        fastcgi_params;

    }

 

    access_log  logs/access_rbacapi.game.ksyun.com.log;

    error_log   logs/error_rbacapi.game.ksyun.com.log;

}


yii 配置文件 
配置路由匹配
        'urlManager' => [ 
'enablePrettyUrl' => true,
'showScriptName' => false,
//                 'enableStrictParsing' => true,
//   'suffix' => '.html',
// 路由管理
'rules' => [
                'views/<name:.*>' => 'views/index',
                '<controller:\w+>/' => '<controller>',
//                 '<controller:\w+>/<id:\d+>' => '<controller>/view',
                '<controller:\w+>/<action:\w+>/<id:\d+>' => '<controller>/<action>',
                '<controller:\w+>/<action:\w+>' => '<controller>/<action>',
//                'view/(?P<$name>.*?)'=>'views/index',
                /* [
                    'class' => 'yii\rest\UrlRule',
                    'controller' => 'gameengine'
                ] */
            ]
],
    ],

ViewController.php
    public function actionIndex()
    {
        //这里大家自己写逻辑来判断 比如用户权限之类的 我就不详细写了
        $str = "/views/views/rbacModules/priv/list.html";
        if($_SERVER["REQUEST_URI"] == $str){
            echo 404;die;
        }
        
//         return $this->renderPartial("index"); 
//这里是加载文件   用url地址当文件物理地址加载
        return  $this-> renderFile("@app".$_SERVER["REQUEST_URI"]) ;
    }

 

 

最后是 gulp的配置文件  这个文件我测试修改了好多次 才弄到上面的规划的路径生成

 

var gulp = require('gulp'),

stylus = require('gulp-stylus'),

imerge = require('gulp-imerge'),

promise = require('bluebird'),

tap = require('gulp-tap'),

rimraf = promise.promisify(require('rimraf')),

uglify = require('gulp-uglify'),

minifyCss = require('gulp-minify-css'),

nobone = require('nobone'),

path = require('path'),

_ = require('lodash'),

nocache = require('gulp-nocache'),

port = 5002;

 

process.env.NODE_ENV = 'development'//'product' //'development'

 

var basePath = './src',

paths = {

css: basePath + '/styles/**/*.@(css|styl)',

js: basePath + '/scripts/**/*.js',

images: basePath + '/images/**/*',

tpl: basePath + '/views/**/*.html',

index: basePath + '/index.html',

staticDest: './web/views'

},

nocacheConf = {

sourceContext: 'src',

outputContext: './web/views'

};

 

gulp.task('clean', function(){

return promise.all([

//rimraf(paths.staticDest)

rimraf(paths.staticDest+"/styles"),

rimraf(paths.staticDest+"/scripts"),

rimraf(paths.staticDest+"/../../views/views"),

//rimraf(paths.staticDest + "/../wiews")

]);

});

 

gulp.task('build:css', ['clean'], function(){

var nocacheSprite = _.once(function(){

return gulp.src(paths.sprites)

.pipe(nocache(_.extend({

type: 'media',

dest: paths.staticDest + (process.env.NODE_ENV == 'development' ? '/images/sprites/[name].[hash:6].[ext]' : '/images/sprites/[name].[hash:8].[ext]')

}, nocacheConf)))

.pipe(gulp.dest(function(file){

return file.base;

}));

});

 

return gulp.src(paths.css)

.pipe(stylus())

.pipe(imerge({

spriteTo: basePath + '/images/sprites',

sourceContext: 'src',

outputContext: 'src',

defaults: {

padding: 5

}

}))

// .pipe(tap(nocacheSprite))

// .pipe(nocache(_.extend({

// type: 'css',

// dest: paths.staticDest + (process.env.NODE_ENV == 'development' ? '/styles/[name].[hash:6].[ext]' : '/styles/[name].[hash:8].[ext]')

// }, nocacheConf)))

.pipe(minifyCss({

compatibility: 'ie8'

}))

// .pipe(gulp.dest(function(file){

// return file.base;

// }));

.pipe(gulp.dest(paths.staticDest + '/styles'));

});

 

gulp.task('build:media', ['build:css'], function(){

return gulp.src(paths.images)

// .pipe(nocache(_.extend({

// type: 'media',

// dest: paths.staticDest + (process.env.NODE_ENV == 'development' ? '/images/[name].[hash:6].[ext]' : '/images/[name].[hash:8].[ext]')

// }, nocacheConf)))

// .pipe(gulp.dest(function(file){

// return file.base;

// }));

.pipe(gulp.dest(paths.staticDest + '/images'));

});

 

gulp.task('build:js', ['build:media'], function(){

return gulp.src(paths.js)

.pipe(uglify())

.pipe(gulp.dest(paths.staticDest + '/scripts'));

});

 

gulp.task('build:tpl', ['build:js'], function(){

gulp.src(paths.index)

.pipe(gulp.dest(paths.staticDest+'/../../views/'));

 

return gulp.src(paths.tpl)

.pipe(gulp.dest(paths.staticDest + '/../../views/views'));

});

 

gulp.task('build:kindeditor', function(){

return gulp.src(basePath + '/scripts/lib/kindeditor/**/**/*')

.pipe(gulp.dest(paths.staticDest + '/scripts/lib/kindeditor'));

});

 

gulp.task('build:uploadify', function(){

return gulp.src(basePath + '/scripts/lib/jquery-uploadify/*.swf')

.pipe(gulp.dest(paths.staticDest + '/scripts/lib/jquery-uploadify'));

});

 

gulp.task('watch', function(){

gulp.watch(paths.css, ['build:css']);

});

 

gulp.task('build', ['build:css', 'build:media', 'build:js', 'build:tpl']);

 

gulp.task('server', function(){

var nb = nobone({

proxy: {},

renderer: {},

service: {}

});

 

var staticDirectory = process.env.NODE_ENV == 'development' ? 'src' : 'web/views';

 

nb.service.use(nb.renderer.static(staticDirectory));

 

nb.service.use(function(req, res){

console.log('http://rbacapi.game.xx.com' + req.originalUrl)

nb.proxy.url(req, res, 'http://rbacapi.game.xx.com' + req.originalUrl);

});

 

nb.service.listen(port, function(){

nb.kit.log('server is listening port ' + port);

});

});

 

gulp.task('default', ['server']);

 

 

 

最后介绍下angular实现的功能  这里前端分内部路由访问 和外部 iframe访问 

在外部 iframe 访问的时候 写一个公共的angular路由 

点击导航的时候 将url传到 $roorScope  (这里不用$scope的原因是我每次点击 清除了缓存,因为模块相同 不清除缓存的话 栏目不能点击)

 

.state('main.iframeModules', iframeModulesRouter.modulesList)

.state('main.iframeModules.modulesList', iframeModulesRouter.modulesList)

 

 

define([], function(){

'use strict';

var ctrl = ['$scope', '$state', 'factory', 'mainService', '$cookies','$sce','$injector','$rootScope', function($scope, $state, factory, mainService, $cookies,$sce,$injector,$rootScope){

$injector.get('$templateCache').removeAll();

console.log("接收:"+$rootScope.navV);

$scope.myURL = $sce.trustAsResourceUrl($rootScope.navV);

// angular.forEach($scope.navList, function(v) {  

// angular.forEach(v.subNavList, function(vv) {

// if(vv.id ==$scope.navV){

// }

// });

// });

}];

 

var controller = {

module: 'iframeModules',

name: 'iframeModulesListController', 

ctrl: ctrl

};

 

return controller;

}

);

 

define([], function(){

'use strict';

 

var router = {};

 

router = {

modulesList: {

url: '/iframeModules',

templateUrl: 'views/iframeModules/modulesList/list.html',

controller: 'iframeModulesListController'

}

};

 

return router;

});

 

define([], function(){

'use strict';

 

var router = {};

 

router = {

rbacmodules: {

url: '/iframeModules',

templateUrl: 'views/iframeModules/list.html'

}

};

 

return router;

});

 

<iframe ng-src='{{myURL}}' marginheight="0" marginwidth="0" frameborder="0"   width=100% height=100%  id="iframepage" name="iframepage" onLoad="iFrameHeight()" ></iframe>

<script type="text/javascript" language="javascript">   

function iFrameHeight() {

    var ifm= document.getElementById("iframepage");

_windowHeight = $($(document)).height(),//获取当前窗口高度 

_windowWidth = $($(document)).width(),//获取当前窗口宽度 

    ifm.width = _windowWidth-300;

    ifm.height = _windowHeight-200;

}   

</script>

 

 

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【AngularJs】学习笔记(持续更新中)

Continue Read..
http://www.runoob.com/angularjs/angularjs-tutorial.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./angular.min.js"></script>
<!-- <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> -->
</head>
<body>

<div ng-app="">
  <p>名字 : <input id="A6" ng-app="myApp6" type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

<!-- <div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div> -->

<!-- <div ng-app="">
  <p>我的第一个表达式: {{ 5 + 5 }}</p>
</div> -->

<!-- <div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script> -->

<!-- <div ng-app="" ng-init="quantity=2;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div> -->


<div id="A1" ng-app="myApp1" ng-init="firstName='John21';lastName='Doe3'">
<p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

<div id="A2" ng-app="myApp2" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
<p>姓为<span ng-bind="person.lastName"></span></p>
</div>

<div id="A3" ng-app="myApp3" ng-init="names=[1,15,19,2,40]">
<p>第三个值为 {{ names[2] }}</p>
<p>第一个值为 <span ng-bind="names"></span></p>
<p>第二个值为 <span ng-bind="names"></span></p>
</div>


<div id="A4" ng-app="myApp4" ng-init="names=['Jani','Hege','Kai','cuzn']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul> 
  <p>111<span ng-bind="names[2]" ></span></p>
  <p>222<span ng-bind="names[3]" ></span></p>
</div>

<div id="A5" ng-app="myApp5" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
<p>111<span ng-bind="names[2]['country']" ></span></p>
</div>



<p id="A7" ng-app="myApp7" >
<my-fun7></my-fun7>
</p>


<div id="A8" ng-app="myApp8">
<div my-fun8> </div>
</div>


<div id="A9" ng-app="myApp9"   ng-init="cuzn=1">
<p>{{cuzn}}</p>
<div class="my-fun9"></div>
</div>

<div id="A10" ng-app="myApp10">
<!-- directive:my-fun10 -->
</div>

<div>
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
</div>
<script>
var a1 = angular.module('myApp1', []);

var a2 = angular.module('myApp2', []);
angular.bootstrap(document.getElementById("A2"),['myApp2']);

var a3 = angular.module('myApp3', []);
angular.bootstrap(document.getElementById("A3"),['myApp3']);

var a4 = angular.module('myApp4', []);
angular.bootstrap(document.getElementById("A4"),['myApp4']);

var a5 = angular.module('myApp5', []);
angular.bootstrap(document.getElementById("A5"),['myApp5']); 

var a6 = angular.module('myApp6', []);
angular.bootstrap(document.getElementById("A6"),['myApp6']); 


var a7 = angular.module("myApp7", []);
a7.directive("myFun7", function() {
    return {
        template : "<h1>这里是元素名指令(这里是P元素)!</h1>"
    };
});
angular.bootstrap(document.getElementById("A7"),['myApp7']);//此代码写在最下面才生效   也就是说 此代码以上的会生效


var a8 = angular.module("myApp8",[]);
a8.directive("myFun8",function(){
return {
template : "<h1>这里是属性指令(这里是在div里面写了个自定义属性)</h1>"
};
});
angular.bootstrap(document.getElementById("A8"),['myApp8']);


var a9 = angular.module("myApp9",[]);
a9.directive("myFun9",function(){
return {
restrict : "C",
template:"<h1>这里是类名指令<b>必须设置restrict = C </b>才能调用(这里是div class='my-fun9')</h1>"
};
});

angular.bootstrap(document.getElementById("A9"),['myApp9']);


var a10 = angular.module("myApp10",[]);
a10.directive("myFun10",function(){
return {
restrict : "M",
replace : true,
template : "<h1>这里是注释指令<b>必须设置restrict = M 并且  replace = true </b>才可以显示(这里是注释)</h1>"
};
});
angular.bootstrap(document.getElementById("A10"),["myApp10"]);

</script>

<h1>AngularJs  ng-model指令</h1>

<div id="A11" ng-app="myApp11" ng-controller="myCtrl11">
名字 : <input ng-model="name" />
</div>
<script>
var a11 = angular.module("myApp11",[]);
a11.controller('myCtrl11', function($scope) {
$scope.name="cuzn";
});
angular.bootstrap(document.getElementById("A11"),["myApp11"]);
</script>


<div id="A12" ng-app="myApp12" ng-controller="myCtrl12">
名字 : <input ng-model="name"  />
<p>你输入了:{{name}}</p>
</div>

<script type="text/javascript">
var a12 = angular.module("myApp12",[]);
//函数里面必须 用 $scope
a12.controller("myCtrl12",function($scope){
$scope.name="cuzncuzn";
});
angular.bootstrap(document.getElementById("A12"),["myApp12"]);
</script>

<form id="A13" ng-app="myApp13" name="myForm13" ng-init="xxx=2" >
Email:{{xxx}}
<input type="email" name="myEmail" ng-model="test" />
<span ng-show="myForm13.myEmail.$error.email">这不是一个合法的邮箱地址</span>
</form>
<script type="text/javascript">
var a13 = angular.module("myApp13",[]);
angular.bootstrap(document.getElementById("A13"),["myApp13"]);
</script>
<p></p>
<form id="A14" ng-app="myApp14" name="myForm14" ng-init="myText14='cuzn@123.com'">
Email:
<input type="email" name="myEmail14" ng-model="myText14" required="required" />
<h1>状态</h1>
Valid: {{myForm14.myEmail14.$valid}}<br />
Dirty: {{myForm14.myEmail14.$dirty}}<br />
Touched: {{myForm14.myEmail14.$touched}}<br />
<br />
状态
<br />
Valid: true (如果输入的值是合法的则为 true)。
<br />
Dirty: false (如果值改变则为 true)。
<br />
Touched: false (如果通过触屏点击则为 true)。
<br />
</form>
<script type="text/javascript">
var a14 = angular.module("myApp14",[]);
angular.bootstrap(document.getElementById("A14"),["myApp14"]);
</script>


<p></p>
<style>
.cuzn.ng-empty {background-color: red;}
.cuzn.ng-not-empty {background-color: orange;}
.cuzn.ng-touched {background-color: yellow;}
.cuzn.ng-untouched {background-color: green;}
.cuzn.ng-valid {background-color: young;}
/* .cuzn.ng-invalid {background-color: blue;} */
/* .cuzn.ng-dirty {background-color: purple;} */
/* .cuzn.ng-pending {background-color: black;}
.cuzn.ng-pristine {background-color: ash;} */
</style>
<h1>CSS</h1>
<form id="A15" ng-app="myApp15" name="myForm15">
输入你的名字:
<input class="cuzn" name="myAddress" ng-model="text" required="required">
</form>

<br />
ng-model 指令根据表单域的状态添加/移除以下类:<br />
ng-empty 空的 red红<br />
ng-not-empty  不空 orange橙<br />
ng-touched 接触,触摸 yellow黄<br />
ng-untouched 不接触,不触摸 不变green绿<br />
ng-valid 有效的young青<br />
ng-invalid 无效blue蓝<br />
ng-dirty 肮脏的purple紫<br />
ng-pending 待定black黑<br />
ng-pristine 原始的ash灰<br />

<script type="text/javascript">
var a15 = angular.module("myApp15",[]);
angular.bootstrap(document.getElementById("A15"),["myApp15"]);
</script>


<h1>scope作用域</h1>

<div id="A16" ng-app="myApp16" ng-controller="myCtrl16">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script type="text/javascript">
var a16 = angular.module("myApp16",[]);
a16.controller("myCtrl16",function($scope){
$scope.names = ['cuzn1','cuzn2','cuzn3'];
});
angular.bootstrap(document.getElementById("A16"),["myApp16"]);
</script>


<h1>根作用域 rootScope</h1>



<div id="A17" ng-app="myApp17" ng-controller="myCtrl17">
<h1>{{name}}家庭成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}}{{name}}</li>
</ul>
</div>
<script type="text/javascript">
var a17 = angular.module("myApp17",[]);
a17.controller("myCtrl17",function($scope,$rootScope){
$scope.names = ['cuzn1','cuzn2','cuzn3'];
$rootScope.name= "Refsnes";
});
angular.bootstrap(document.getElementById("A17"),["myApp17"]);
</script>


<div id="A18" ng-app="myApp18" ng-controller="myCtrl18">
姓<input type="text" ng-model="xing" /><br />
名<input type="text" ng-model="ming" /><br />
姓名:{{funName()}}
</div>
<script type="text/javascript">
var a18 = angular.module("myApp18",[]);
a18.controller("myCtrl18",function($scope){
$scope.xing = '童';
$scope.ming = '星';
$scope.funName = function(){
return $scope.xing+$scope.ming;
}
})
angular.bootstrap(document.getElementById("A18"),["myApp18"]);
</script>


<div id="A19" ng-app="myApp19" ng-controller="waibujs">
第一:<input type="text" ng-model="diyi" /><br />
第二:<input type="text" ng-model="dier" /><br />
综合:{{diyi+dier}}
</div>


<div id="A20" ng-app="myApp20" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names"> {{x.name+' '+x.age}} </li>
</ul>
</div>
<script type="text/javascript" src="waibu.js"></script>

<div id="A21"  ng-app="myApp21" ng-controller="xiaoxieC" >
<p>姓名{{name | lowercase}}</p>
</div>
<script type="text/javascript">
var a21 = angular.module("myApp21",[]);
a21.controller("xiaoxieC",function($scope){
$scope.name="CUZN";
});
angular.bootstrap(document.getElementById("A21"),["myApp21"]);
</script>


<div id="A22" ng-app="myApp22" ng-controller="guolvC">
<input type="number" ng-model="num1" />
<input type="number" ng-model="num2" />
<p>总价 = {{(num1*num2)|currency }}</p>
</div>
<script type="text/javascript">
var a22 = angular.module("myApp22",[]);
a22.controller("guolvC",function($scope){
$scope.num1="1.1";
$scope.num2="2.2";
});
angular.bootstrap(document.getElementById("A22"),["myApp22"]);
</script>


<h1>向指令添加过滤器</h1>
<div id="A23" ng-app="myApp23" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'sort'">{{'name:'+x.name+' ,sort:'+x.sort}}</li>
</ul>
</div>
<script type="text/javascript">
var a23 = angular.module("myApp23",[]);
a23.controller("namesCtrl",function($scope){
$scope.names = [
{'name':'cuzn1','sort':2},
{'name':'cuzn2','sort':3},
{'name':'cuzn3','sort':1},
];
});
angular.bootstrap(document.getElementById("A23"),["myApp23"]);
</script>

<h1>过滤输入</h1>
<div id="A24" ng-app="myApp24" ng-controller="namesCtrl24">
<p><input type="text" ng-model="test" /></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'sort'">
{{'name:'+(x.name | uppercase)+' , sort:'+x.sort}}
</li>
</ul>
</div>
<script type="text/javascript">
var a24 = angular.module("myApp24",[]);
a24.controller("namesCtrl24",function($scope){
$scope.names = [
{'name':'cuzn1','sort':2},
{'name':'cuzn2','sort':3},
{'name':'cuzn3','sort':1},
];
});
angular.bootstrap(document.getElementById("A24"),["myApp24"]);
</script>

<p></p>
<h1>AngularJs服务(Service)</h1>
<h2>$location服务</h2>
<div id="A25" ng-app="myApp25" ng-controller="nameCtrl25">
<p>{{myUrl}}</p>
</div>
<script type="text/javascript">
var a25 = angular.module("myApp25",[]);
a25.controller("nameCtrl25",function($scope,$location){
$scope.myUrl = $location.absUrl();
});
angular.bootstrap(document.getElementById("A25"),["myApp25"]);
</script>

<h2>$http服务</h2>
<div id="A26" np-app="myApp26" ng-controller="nameCtrl26">
<p>欢迎信息:</p>
<b>{{myWelcome}}</b>
<p> $http 服务向服务器请求信息,返回的值放入变量 "myWelcome" 中。</p>
</div>
<script type="text/javascript">
var a26 = angular.module("myApp26",[]);
a26.controller("nameCtrl26",function($scope,$http){
//没有跨域
/* $http.get("http://www.xtyzt.cn/1/angular/webcom.html").then(function(response){
$scope.myWelcome = response.data;
});*/ 
/*
<?php
$callback = $_GET['callback'];
$response = array('code'=>200, 'data'=>'success');
$json = json_encode($response);
echo "$callback($json)";
*/
//跨域
$http.jsonp("http://www.xtyzt.cn/1/angular/webcom.php?callback=JSON_CALLBACK")
    .success(
        function(data, status, header, config){
            $scope.myWelcome = data;
        }
    )
    .error(
        function(data){
            alert(data);
        }
    ); 
});
angular.bootstrap(document.getElementById("A26"),["myApp26"]);
</script>


<h2>$timeout服务</h2>
<div id="A27" ng-app="myApp27" ng-controller="nameCtrl27">
<p>{{cuzn}}</p>
</div>
<script type="text/javascript">
var a27 = angular.module("myApp27",[]);
a27.controller("nameCtrl27",function($scope,$timeout){
$scope.cuzn = "这里是默认显示";
$timeout(function(){
$scope.cuzn = "这里是延迟显示";
},5000);
});
angular.bootstrap(document.getElementById("A27"),["myApp27"]);
</script>

<h2>$interval服务</h2>
<div id="A28" ng-app="myApp28" ng-controller="nameCtrl28">
<p>{{cuzn}}</p>
</div>

<script type="text/javascript">
var a28 = angular.module("myApp28",[]);
a28.controller("nameCtrl28",function($scope,$interval){
$scope.cuzn = "这里是interval默认显示";
$interval(function(){
$scope.cuzn = new Data().toLocaleTimeString();
},5000);
});
angular.bootstrap(document.getElementById("A28"),["myApp28"]);
</script>



<h2>创建自定义服务</h2>
<div id="A29" ng-app="myApp29" ng-controller="nameCtrl29">
<p>拼接字符串:</p>
<p>{{cuzn}}</p>
<p>数字相加:</p>
<p>{{cuzn1}}</p>
</div>
<script type="text/javascript">
var a29 = angular.module("myApp29",[]);
a29.service('cuznService',function(){
this.myFunc = function(x){
return x+'这里是函数加的字符串';
};
this.cuznFunc = function(x,y){
return x+y;
}
});
a29.controller("nameCtrl29",function($scope,cuznService){
$scope.cuzn = cuznService.myFunc('cuzn');
$scope.cuzn1 = cuznService.cuznFunc(1,2);
});
angular.bootstrap(document.getElementById("A29"),["myApp29"]);
</script>



<h2>过滤器中,使用自定义服务</h2>
<div id="A30" ng-app="myApp30" ng-controller="nameCtrl30">
<p>{{cuzn}}255-100={{[255,100]| myFormat}}</p>
</div>
<script type="text/javascript">
var a30 = angular.module("myApp30",[]);
a30.service("cuznService",function(){
this.myFunc = function(x){
return x[0]-x[1];
};
});
a30.filter("myFormat",['cuznService',function(cuznService){
return function(x){
return cuznService.myFunc(x);
};
}]);
a30.controller("nameCtrl30",function($scope){
$scope.cuzn = '计算';
});
angular.bootstrap(document.getElementById("A30"),["myApp30"]);
</script>


<h2>自己写的一个文本框计算(通过文本框复制 然后用service计算)</h2>
<div id="A31" ng-app="myApp31" ng-controller="nameCtrl31">
<input type="number" ng-model="num1"  ng-change="myFunc()">+<input type="number" ng-model="num2" ng-change="myFunc()">=<input type="text" readonly="readonly" ng-model="num3">
<p>{{num1}}+{{num2}}={{num3}}</p>
</div>

<script type="text/javascript">
var a31 = angular.module("myApp31",[]);
a31.service("cuznService",function(){
this.cuznFunc = function(x,y){
console.log(x);
return x+y;
}
});

a31.controller("nameCtrl31",['$scope','cuznService',function($scope,cuznService){
//console.log(cuznService);
$scope.num1 = $scope.num2  = $scope.num3 = 0;
$scope.myFunc = function(){
$scope.num3 = cuznService.cuznFunc($scope.num1,$scope.num2);
//$scope.num3 = $scope.num1+$scope.num2;
//cuznServive.myFunc($scope.num1,$scope.num2);
}
}]);
angular.bootstrap(document.getElementById("A31"),["myApp31"]);
</script>

<h2>数组循环过滤</h2>
<div id="A32" ng-app="myApp32" ng-controller='nameCtrl32'>
<ul> 
<li ng-repeat="k in names">{{ k | myFormat}} </li>
</ul>
</div>
<script type="text/javascript">
var a32 = angular.module("myApp32",[]);
a32.service('cuznService',function(){
this.myFunc = function(x){
//console.log(x);
return "name:"+x.name+",age:"+x.age+",sex:"+x.sex;
}
});
a32.filter('myFormat',['cuznService',function(cuznService){
return function (x){
return cuznService.myFunc(x);
}
}]) ;
a32.controller("nameCtrl32",function($scope){
//$scope.names = {"name":"cuzn","age":27,"sex":"男"};
$scope.names = [
{"name":"cuzn","age":27,"sex":"男"},
{"name":"cuzn1","age":271,"sex":"男1"}
];
/* $scope.names = [
    {'name':'cuzn1','age':2},
    {'name':'cuzn2','age':3},
    {'name':'cuzn3','age':1},
    ]; */
});
angular.bootstrap(document.getElementById("A32"),["myApp32"]);
</script>



<h1>AngularJs Select(选择框)</h1>
<h2>使用ng-options</h2>
<div id="A33" ng-app="myApp33" ng-controller="myCtrl33">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script type="text/javascript">
var a33 = angular.module("myApp33",[]);
a33.controller('myCtrl33',function($scope){
$scope.names = ['cuzn1','cuzn2','cuzn3'];
});
angular.bootstrap(document.getElementById("A33"),["myApp33"]);
</script>

<h2>使用ng-repeat</h2>
<div id="A34" ng-app="myApp24" ng-controller="myC34">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script type="text/javascript">
var a34 = angular.module("myApp34",[]);
a34.controller("myC34",function($scope){
$scope.names = ['name1','name2','name3'];
});
angular.bootstrap(document.getElementById("A34"),["myApp34"]);
</script>


<h2>根据select key  获取选定的value</h2>
<div id="A35" ng-app="myApp35" ng-controller="myC35">
<select ng-model="myM35"  ng-options="myM35.name for myM35 in names"></select><!-- 这里myM35.name 是下拉框要显示的 值   -->
<p>你选择的k是{{myM35.name}},对应的v是{{myM35.id}}</p><!-- 这里myM35.name和myM35.id 是选择下拉框之后获取的值   -->
</div>
<script type="text/javascript">
var a35 = angular.module("myApp35",[]);
a35.controller("myC35",function($scope){
$scope.names =  [
            {name:'a',id:'11'},
            {name:'b',id:'22'},
            {name:'c',id:'33'}
        ];
/* $scope.change = function (x){
console.log(x);
} */
$scope.myM35 = $scope.names[1];   //默认选中
});
angular.bootstrap(document.getElementById("A35"),["myApp35"]);
</script>


<select>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>

<h1>表格</h1>

<style>
.cuzntable36  th  td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
.cuzntable36 tr:nth-child(odd) {
  background-color: #f1f1f1;
}
.cuzntable36 tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

<div id="A36" ng-app="myApp36" ng-controller="myC36">
<table class="cuzntable36">
<tr ng-repeat="x in names | orderBy :'id':true"> <!--  这里true 是按id倒序   -->
<td>{{$index+1}}</td> <!-- 这里是序号  -->
<td>{{x.id}}</td>
<td>{{x.name}}</td>
</tr>
</table>
</div>

<script type="text/javascript">
var a36 = angular.module("myApp36",[]);
a36.controller("myC36",function($scope){
$scope.names = [{ id: 11, name: '北京' }, { id: 22, name: '上海' }, { id: 33, name: '广州' }];
});
angular.bootstrap(document.getElementById("A36"),["myApp36"]);
</script>


<h1>使用奇(odd)和偶(even)判断</h1>
<div id="A37" ng-app="myApp37" ng-controller="myC37">
<table>
<tr ng-repeat = "x in names">
<td ng-if="$odd" style="background-color:red">{{x.id}}</td>
<td ng-if="$even">{{x.id}}</td>
<td ng-if="$odd" style="background-color:red" >{{x.name}}</td>
<td ng-if="$even">{{x.name}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var a37 = angular.module("myApp37",[]);
a37.controller("myC37",function($scope){
$scope.names = [{ id: 11, name: '北京' }, { id: 22, name: '上海' }, { id: 33, name: '广州' }];
});
angular.bootstrap(document.getElementById("A37"),["myApp37"]);
</script>


<h1>AngularJs HTML DOM</h1>
<h2>ng-disabled指令直接绑定应用程序数据到HTML的disabled属性</h2>
<div id="A38" ng-app="myApp38" ng-controller="myC38">
<p><button ng-disabled="myDisabled38">点我!</button></p>
<p><input type="checkbox" ng-model="myDisabled38" />按钮</p>
<p>{{myDisabled38}}</p>
</div>
<script type="text/javascript">
var a38 = angular.module("myApp38",[]);
a38.controller("myC38",function($scope){
});
angular.bootstrap(document.getElementById("A38"),["myApp38"]);
</script>

<h2>ng-show指令</h2>
<div id="A39" ng-app="myApp39" ng-controller = "myC39">
<p>这里是ng-show = true<span ng-show="true">我是可见的 </span></p>
<p>这里是ng-show = false<span ng-show="false">我是不可见的 </span></p>
</div>

<script type="text/javascript">
var a39 = angular.module("myApp39",[]);
a39.controller("myC39",function($scope){
});
angular.bootstrap(document.getElementById("A39"),["myApp39"]);
</script>


<h2>ng-hide指令</h2>
<div id="A40" ng-app="myApp40" ng-controller = "myC40">
<p>这里是ng-hide = true<span ng-hide="true">我是不可见的 </span></p>
<p>这里是ng-hide = false<span ng-hide="false">我是可见的 </span></p>
</div>

<script type="text/javascript">
var a40 = angular.module("myApp40",[]);
a40.controller("myC40",function($scope){
});
angular.bootstrap(document.getElementById("A40"),["myApp40"]);
</script>






<h2>ng-click指令(AngularJs点击事件)</h2>
<div id="A41" ng-app="myApp41" ng-controller="myC41">
<button ng-click="num = num + 1">点我+1</button>
<p>{{num}}</p>
</div>

<script type="text/javascript">
var a41 = angular.module("myApp41",[]);
a41.controller("myC41",function($scope){
//console.log($scope);
$scope.num = 0;
});
angular.bootstrap(document.getElementById("A41"),["myApp41"]);
</script>


<h2>隐藏HTML元素(ng-hide)</h2>
<div id="A42" ng-app="myApp42" ng-controller="myC42">
<button ng-click="dianji()">显示/隐藏</button>
<button ng-click="xianshi()">显示</button>
<button ng-click="yinchang()">隐藏</button>

<p ng-hide="myVal42">
姓<input type="text" ng-model="xing42" /> 名<input type="text"
ng-model="ming42" /> <br /> name : {{xing42+" "+ming42}}
</p>
</div>
<script type="text/javascript">
var a42 = angular.module("myApp42",[]);
a42.controller("myC42",function($scope){
$scope.xing42 = 'CU';
$scope.ming42 = 'ZN';
$scope.myVal42 = false;
$scope.dianji = function(){
$scope.myVal42 = !$scope.myVal42;
};
$scope.xianshi = function(){
$scope.myVal42 = false;
};
$scope.yinchang = function(){
$scope.myVal42 = true;
}
});
angular.bootstrap(document.getElementById("A42"),["myApp42"]);
</script>

<h2>隐藏HTML(ng-show)</h2>
<div id="A43" ng-app="myApp43" ng-controller="myC43">
<button ng-click="dianji()">显示/隐藏</button>
<button ng-click="xianshi()">显示</button>
<button ng-click="yinchang()">隐藏</button>
<p ng-show="myVal43">
姓<input type="text" ng-model="xing43" /> 名<input type="text"
ng-model="ming43" /> <br /> name : {{xing43+" "+ming43}}
</p>
</div>
<script type="text/javascript">
var a43 = angular.module("myApp43",[]);
a43.controller("myC43",function ($scope){
$scope.xing43 = "童";
$scope.ming43 = "星";
$scope.myVal43 = true;
$scope.dianji = function(){
$scope.myVal43 = !$scope.myVal43;
};
$scope.xianshi = function(){
$scope.myVal43 = true;
};
$scope.yinchang = function(){
$scope.myVal43 = false;
}
});
angular.bootstrap(document.getElementById("A43"),["myApp43"]);
</script>


<h1>HTML表单</h1>
<div id="A44" ng-app="myApp44" ng-controller="myC44">
<form novalidate>
姓:<input type="text" ng-model="user.xing" /> 名:<input type="text"
ng-model="user.ming" /> <br />
<button ng-click="chongzhi()">重置</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
<p>novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。</p>
</div>


<script type="text/javascript">
var a44 = angular.module("myApp44",[]);
a44.controller("myC44",function($scope){
$scope.master = {'xing':'cu','ming':'zn'};
$scope.user = {'xing':'童','ming':'星'};
$scope.chongzhi = function(){
//$scope.user = angular.copy($scope.master);
$scope.user = $scope.master;
}
//$scope.chongzhi();
});
angular.bootstrap(document.getElementById("A44"),["myApp44"]);
</script>



<h1>HTML表单输入验证</h1>
<h2>$dirty 表单有填写记录</h2>
<h2>$valid字段 内容合法</h2>
<h2>$invalid字段内容是非法的</h2>
<h2>$pristine表单没有填写记录</h2>
<form id="A45" ng-app="myApp45" ng-controller="myC45" name="myF45"
novalidate="novalidate">
<p>
用户名:<br /> <input type="text" name="user" ng-model="user1" required />
<span style="color: red"
ng-show="myF45.user.$dirty && myF45.user.$invalid">user</span> <span
ng-show="myF45.user.$error.required">用户名是必须写的.</span>
</p>

<p>
邮箱:<br /> <input type="email" name="email" ng-model="email1"
required> <span style="color: red"
ng-show="myF45.email.$dirty && myF45.email.$invalid">email</span> <span
ng-show="myF45.email.$error.required">邮箱是必须填写的.</span> <span
ng-show="myF45.email.$error.email">非法邮箱</span>
</p>
<p>
<input type="submit"
ng-disabled="myF45.user.$dirty && myF45.user.$invalid || 
myF45.email.$dirty && myF45.email.$invalid" />
</p>
</form>
<script type="text/javascript">
var a45 = angular.module("myApp45",[]);
a45.controller("myC45",function($scope){
$scope.user1 = "CU";
$scope.email1 = "123@123.com";
});
angular.bootstrap(document.getElementById("A45"),["myApp45"]);
</script>


<h1>AngularJs全局API</h1>
<h2>angular.lowercase() 转换字符串为小写</h2>
<div id="A46" ng-app="myApp46" ng-controller="myC46">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>

<script type="text/javascript">
var a46 = angular.module("myApp46",[]);
a46.controller("myC46",function ($scope){
//onsole.log($scope);
$scope.x1 = "CU";
$scope.x2 = angular.lowercase($scope.x1);
});
angular.bootstrap(document.getElementById("A46"),["myApp46"]);
</script>
<h2>angular.uppercase() 转换字符串为大写</h2>
<div id="A47" ng-app="myApp47" ng-controller="myC47">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>

<script type="text/javascript">
var a47 = angular.module("myApp47",[]);
a47.controller("myC47",function ($scope){
//onsole.log($scope);
$scope.x1 = "cu";
$scope.x2 = angular.uppercase($scope.x1);
});
angular.bootstrap(document.getElementById("A47"),["myApp47"]);
</script>
<h2>angular.isString() 判断给定的对象是否为字符串,如果是反回true</h2>
<div id="A48" ng-app="myApp48" ng-controller="myC48">
<p>{{x1}}</p>
<p>{{x2}}</p>
<p>{{x3}}</p>
<p>{{x4}}</p>
</div>

<script type="text/javascript">
var a48 = angular.module("myApp48",[]);
a48.controller("myC48",function ($scope){
//onsole.log($scope);
$scope.x1 = "cu";
$scope.x2 = angular.isString($scope.x1);

$scope.x3 = 123;
$scope.x4 = angular.isString($scope.x3);
});
angular.bootstrap(document.getElementById("A48"),["myApp48"]);
</script>
<h2>angular.inNumber() 判断给定的对象是否为数字,如果是返回true</h2>
<div id="A49" ng-app="myApp49" ng-controller="myC49">
<p>{{x1}}</p>
<p>{{x2}}</p>
<p>{{x3}}</p>
<p>{{x4}}</p>
</div>

<script type="text/javascript">
var a49 = angular.module("myApp49",[]);
a49.controller("myC49",function ($scope){
//console.log($scope);
$scope.x1 = "cu";
$scope.x2 = angular.isNumber($scope.x1);

$scope.x3 = 123;
$scope.x4 = angular.isNumber($scope.x3);
});
angular.bootstrap(document.getElementById("A49"),["myApp49"]);
</script>




<h1>AngularJs bootstrap($watch 用于监控,模型变化,当你的模型部分有变化时,会通知你)</h1>
<div id="A50" ng-app="myApp50" ng-controller="myC50">
<div class="container">
<h3>User</h3>

<table class="table table-striped">
<tr>
<td>Edit</td>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr ng-repeat=" user in names">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit{{user.id}}
</button>
</td>
<td>{{user.fName}}</td>
<td>{{user.lName}}</td>
</tr>
</table>



<div>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>Create New User
</button>
</div>

<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>


<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit"
placeholder="First Name">
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit"
placeholder="Last Name">
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2"
placeholder="Repeat Password">
</div>
</div>
</form>

<div>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>

</div>
</div>

<script type="text/javascript">
var a50 = angular.module("myApp50",[]);
a50.controller("myC50",function ($scope){
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.names = [
{id:11,fName:'cuznF11',lName:'cuznL11'},
{id:22,fName:'cuznF22',lName:'cuznL22'},
{id:13,fName:'cuznF13',lName:'cuznL13'},
{id:14,fName:'cuznF14',lName:'cuznL14'},
{id:15,fName:'cuznF15',lName:'cuznL15'},
]; 
//console.log($scope.names);
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.editUser = function(id){
if(id == 'new'){
$scope.edit = true;
$scope.incomplete = true
$scope.fName = '';
$scope.lName = '';
}else{
$scope.edit = false;
for(var v in $scope.names){
//console.log($scope.names[v]);
if($scope.names[v].id == id){
$scope.fName = $scope.names[v].fName;
$scope.lName = $scope.names[v].lName;
}
}
}
};
//$watch 用于监控,模型变化,当你的模型部分有变化时,会通知你
$scope.$watch('passw1',function(){
$scope.test();
}) ;
$scope.$watch('passw2',function(){
$scope.test();
});
$scope.$watch('fName',function(){
$scope.test();
});
$scope.$watch('lName',function(){
$scope.test();
});
$scope.test = function (){
if($scope.passw1 != $scope.passw2){
$scope.error = true;
}else{
$scope.error = false;
}
$scope.incomplete = false;
if($scope.edit &&  (!$scope.fName.length || !$scope.lName.length || !$scope.passw1.length || !$scope.passw2.length) ){
$scope.incomplete = true;
}
};
});
angular.bootstrap(document.getElementById("A50"),['myApp50']);
</script>

<div id="A51" ng-app="myApp51" ng-controller="myC51">
<div class="container">
导入webcom.htm文件内容:
<div ng-include="'webcom.html'"></div>
</div>
</div>

<script type="text/javascript">
var a51 = angular.module("myApp51",[]);
a51.controller("myC51",function(){
});
angular.bootstrap(document.getElementById("A51"),["myApp51"]);
</script>

<h1>Angular动画</h1>
<style>
#A53 div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}

.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top: -200px;
left: 200px;
}
</style>
<div id="A53" ng-app="myApp53" ng-controller="myC53">
<div ng-hide="myCheck53"></div>
<p>
隐藏DIV:<input type="checkbox" ng-model="myCheck53" />
</p>
</div>

<script type="text/javascript">

var a53 = angular.module("myApp53",['ngAnimate']);
a53.controller("myC53",function ($scope){
});
angular.bootstrap(document.getElementById("A53"),["myApp53"]);
</script>




<h1>Angular依赖注入</h1>
<div id="A54" ng-app="myApp54" ng-controller="myC54">
<p>
输入一个数字:<input type="number" ng-model="number" />
</p>
<button ng-click="square()">
X<sup>2</sup>
</button>
<p>结果:{{result}}</p>
</div>


<script type="text/javascript">
var a54 = angular.module("myApp54",[]);
a54.config(function($provide) {
        $provide.provider('MathService', function() {
           this.$get = function() {
              var factory = {};
              
              factory.multiply = function(a, b) {
                 return a + b;
              }
              return factory;
           };
        });
     }); 
a54.value("defaultInput", 5);
     
/* a54.factory('MathService', function() {
        var factory = {};
        
        factory.multiply = function(a, b) {
           return a * b;
        }
        return factory;
     }); */
     
a54.service('CalcService', function(MathService){
        this.square = function(a) {
           return MathService.multiply(a,a);
        }
     });
     
a54.controller('myC54', function($scope, CalcService, defaultInput) {
        $scope.number = defaultInput;
        $scope.result = CalcService.square($scope.number);

        $scope.square = function() {
           $scope.result = CalcService.square($scope.number);
        }
     });
angular.bootstrap(document.getElementById("A54"),["myApp54"]);
</script>



<h1>Angular路由</h1>
<div id="A55" ng-app="myApp55" ng-controller="myC55" class="ng-scope">
<div>
<div id="navigation">
<a href="#/home">Home</a> <a href="#/about">About</a>
</div>

<div ng-view="">{{x}}</div>

</div>
</div>

<script type="text/javascript">
var a55 = angular.module("myApp55",['ngRoute']);
/* a55.config(['$routeProvider', function($routeProvider){
        $routeProvider
        .when('/home',{template:'这是电脑分类页面'})
        .when('/about',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/home'});
    }]);
a55.controller('myC55', function($scope){
$scope.x = 1;
});   */
 
/*坑爹呀   一个页面有多个ng-app  不能url的路由*/
a55.controller('HomeController', function ($scope) {   $scope.$route = $route;})
.controller('AboutController', function ($scope) { $scope.$route = $route;})
.config(['$routeProvider', function($routeProvider){
   $routeProvider.
   when('/home', {
       templateUrl: '1.html',
       controller: 'HomeController'
   }).
   when('/about', {
       templateUrl: '2.html',
       controller: 'AboutController'
   }).
   otherwise({
       redirectTo: '/home'
   });
}]);
//angular.bootstrap(document.getElementById("A55"),["myApp55"]);
</script>


<h1>AngularJs应用</h1>
<div id="A56" ng-app="myApp56" ng-controller="myC56">
<h2>我的笔记</h2>
<p>
<textarea rows="10" cols="40" ng-model="myM56" ng-disabled="textareaDisabled"></textarea>
</p>
<p>
<button ng-click="save()" ng-disabled="saveaDisabled">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩余字数:<span ng-bind="left()"></span><p>
</div>
<script type="text/javascript">
var a56 = angular.module("myApp56",[]);
a56.controller("myC56",function($scope){
$scope.saveaDisabled = false;
$scope.save = function (){alert("保存");}
$scope.clear = function (){$scope.myM56 = '';}
$scope.left = function (){$num =  10 - $scope.myM56.length; if($num<=0){$scope.saveaDisabled = true;}else{$scope.saveaDisabled = false;} return $num;}
});
angular.bootstrap(document.getElementById("A56"),["myApp56"]);
</script>

</body>
</html>

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权