您的位置:首页 > Web前端 > AngularJS

Angularjs 学习笔记-2017-02-06-双向数据绑定

2017-02-06 18:21 846 查看
NG:

  ng-bind: 标签属性 ng-bind=" obj.xxx " ,不会出现

[b]  用于区别{{ }} 标签,当页面未加载完毕时可以看到{{}}标签,非常不雅观,ng-bind可以解决这个问题, 为了方便性,一般ng-bind用在首页,其他子模板可以使用{{}}[/b]

var userInfoModel = angular.module('userInfoModel', ['ngRoute']); //,'ngAnimate'

userInfoModel.controller('UserInfoCtrl', ['$scope', function ($scope) {
$scope.userInfo = {
email: '389398613@qq.com',
password: '123456789',
isAutoLogin: true
}
}]);

userInfoModel.controller('ToggleMenuCtrl', ['$scope', function ($scope) {
$scope.menuState = { show: false };
$scope.toggleMenu = function () {
$scope.menuState.show = !$scope.menuState.show;
}
}]);

userInfoModel.controller('NgClassCtrl', ['$scope', function ($scope) {
$scope.isBtn = true;
$scope.isBtnDefault = true;
$scope.BtnDefault = 'btn-default';
}]);

//userInfoModel.config(function ($routeProvider) {
//    $routeProvider
//         .when('/Angular/DoubleDataBind/hello', {
//             templateUrl: '/Angular/Hello.cshtml',
//             controller: 'ToggleMenuCtrl'
//         })
//       .when('/Angular/DoubleDataBind/list', {
//           templateUrl: '/Angular/DoubleDataBind/List',
//           controller: 'NgClassCtrl'
//       })
//        .otherWise('/Angular/DoubleDataBind/hello');
//});

userInfoModel.config(['$routeProvider', function ($routeProvider) {
$routeProvider
//.when('/', { template: '这是首页页面' })
.when('/computers', { template: '这是电脑分类页面' })
.when('/printers', { template: '这是打印机页面' })
.when('/hello', {
templateUrl: '/Angular/Hello',
controller: 'ToggleMenuCtrl'
})
.when('/list', {
templateUrl: '/Angular/List',
controller: 'NgClassCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
console.log('1113');


js Code
  ng-Animate:引入动画

BootStrap:

  panel

  panel-primary

  panel-heading

  panel-title

  panel-body

  panel-footer

  form-horizontal

  form-group



参考网站:

angular api
https://docs.angularjs.org/api
css参考手册
http://css.doyoe.com/
bootstrap中文api
http://www.bootcss.com/
www.w3schools.com
http://www.w3schools.com/angular/angular_intro.asp http://css.doyoe.com/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: