GVKun编程网logo

AngularJs bootstrap搭载前台框架——js控制部分（angular前端框架）

23

在这篇文章中，我们将带领您了解AngularJsbootstrap搭载前台框架——js控制部分的全貌，包括angular前端框架的相关情况。同时，我们还将为您介绍有关AngularJS学习笔记---B

在这篇文章中，我们将带领您了解AngularJs bootstrap搭载前台框架——js控制部分的全貌，包括angular前端框架的相关情况。同时，我们还将为您介绍有关 AngularJS 学习笔记---Bootstrap、Angular.js与Bootstrap相结合实现手风琴菜单代码_AngularJS、Angular.js与Bootstrap相结合实现表格分页代码_AngularJS、AngularJs bootstrap搭载前台框架——准备工作的知识，以帮助您更好地理解这个主题。

本文目录一览：

AngularJs bootstrap搭载前台框架——js控制部分（angular前端框架）

AngularJs bootstrap搭载前台框架——js控制部分（angular前端框架）

    这个简单的框架最后只剩下了js的控制部分了，angular框架有自己的逻辑部分，有自己的controller和service层，由于我们可能要用到angular的一些内置的resource和cookie，所以我们需要再加入angular的一些lib：

    --------------index.html------------------

<script src="lib/angular/angular-strap.js"></script> 
<script src="lib/angular/angular-resource.js"></script> 
<script src="lib/angular/angular-cookies.js"></script>

    首先看我们的services.js

''use strict''; 
 
/* Services */ 
 
 
// Demonstrate how to register services 
// In this case it is a simple value service. 
var services = angular.module(''jthink.services'', [''ngResource'']). 
 value(''version'', ''1.0''); 
 
services.factory(''LoginService'', [''$resource'', function ($resource) { 
 return $resource(''fakeData/userLogin.json'', {}, { 
 login: {method: ''GET'', params: {}, isArray: false} 
 }); 
}]);

    这里我们使用了工厂模式，其实最后是给controller层提供了一个login的方法来调用，下面就看看这个controllers.js

''use strict''; 
 
/* Controllers */ 
var controllers = angular.module(''jthink.controllers'', []); 
controllers.controller(''LoginCTRL'', [''$scope'', ''LoginService'', function ($scope, LoginService) { 
 $scope.login = {}; 
 $scope.login.submit = function() { 
 console.log($scope.login.email); 
 console.log($scope.login.password); 
 // do some process, invoke the service layer 
 LoginService.login( 
  {}, 
  { 
  email: $scope.login.email, 
  password: $scope.login.password 
  }, 
  function (success) { 
  if (success.status == "success") { 
   alert(''login success''); 
  } else { 
   // error message 
  } 
  }, 
  function (error) { 
  // error message 
  } 
 ); 
 }; 
}]);

    这里就简单得做了一些逻辑，最主要的还是调用了service层提供的那个login方法。

    其他的一些模块可以按照这样的模式来写，由于时间关系，很多细节在这个简单的框架中就不去写了，具体的如果大家想了解就私下跟我要这个框架吧，我自己基本写完整了。。。。。

      以上就是对AngularJS bootstrap 搭建前台JS部分的代码，后续继续添加相关资料，谢谢大家对本站的支持！

              相关文章：

                                 AngularJs bootstrap搭载前台框架——js控制部分
                                 AngularJs bootstrap搭载前台框架——基础页面
                                 AngularJs bootstrap搭载前台框架——准备工作
                                 AngularJs bootstrap详解及示例代码

您可能感兴趣的文章:
  • AngularJS bootstrap启动详解及实例代码
  • AngularJs bootstrap搭载前台框架——基础页面
  • AngularJs bootstrap搭载前台框架——准备工作
  • 利用Angularjs和Bootstrap前端开发案例实战
  • Bootstrap和Angularjs配合自制弹框的实例代码
  • BootStrap+Angularjs+NgDialog实现模式对话框
  • angularjs封装bootstrap时间插件datetimepicker
  • 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
  • angularJS与bootstrap结合实现动态加载弹出提示内容
  • AngularJS 与Bootstrap实现表格分页实例代码

AngularJS 学习笔记---Bootstrap

AngularJS 学习笔记---Bootstrap

This page explains the Angular initialization process and how you can manually initialize Angular if necessary.

Angular<script>Tag

This example shows the recommended path for integrating Angular with what we call automatic initialization.

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
  <body>
    ...
    <script src="angular.js"></script>
  </body>
</html>
  1. Place thescripttag at the bottom of the page. Placing script tags at the end of the page improves app load time because the HTML loading is not blocked by loading of theangular.jsscript. You can get the latest bits fromhttp://code.angularjs.org. Please don't link your production code to this URL,as it will expose a security hole on your site. For experimental development linking to our site is fine.
    • Choose:angular-[version].jsfor a human-readable file,suitable for development and debugging.
    • Choose:angular-[version].min.jsfor a compressed and obfuscated file,suitable for use in production.

  2. Placeng-appto the root of your application,typically on the<html>tag if you want angular to auto-bootstrap your application.

  3. If you choose to use the old style directive Syntaxng:then include xml-namespace inhtmlto make IE happy. (This is here for historical reasons,and we no longer recommend use ofng:.)

Automatic Initialization

Angular initializes automatically uponDOMContentLoadedevent or when theangular.jsscript is evaluated if at that timedocument.readyStateis set to'complete'. At this point Angular looks for thengAppdirective which designates your application root. If thengAppdirective is found then Angular will:

  • load themoduleassociated with the directive.
  • create the applicationinjector
  • compile the DOM treating thengAppdirective as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.
<!doctype html>
<html ng-app="optionalModuleName">
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

As a best practice,consider adding anng-strict-didirective on the same element asng-app:

<!doctype html>
<html ng-app="optionalModuleName" ng-strict-di>
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

This will ensure that all services in your application are properly annotated. See thedependency injection strict modedocs for more.

Manual Initialization

If you need to have more control over the initialization process,you can use a manual bootstrapping method instead. Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.

Here is an example of manually initializing Angular:

<!doctype html>
<html>
<body>
  <div ng-controller="MyController">
    Hello {{greetMe}}!
  </div>
  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>
    angular.module('myApp',[])
      .controller('MyController',['$scope',function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(document).ready(function() {
      angular.bootstrap(document,['myApp']);
    });
  </script>
</body>
</html>

Note that we provided the name of our application module to be loaded into the injector as the second parameter of theangular.bootstrapfunction. Notice thatangular.bootstrapwill not create modules on the fly. You must create any custommodulesbefore you pass them as a parameter.

You should callangular.bootstrap()afteryou've loaded or defined your modules. You cannot add controllers,services,directives,etc after an application bootstraps.

Note:You should not use the ng-app directive when manually bootstrapping your app.

This is the sequence that your code should follow:

  1. After the page and all of the code is loaded,find the root element of your AngularJS application,which is typically the root of the document.

  2. Callangular.bootstraptocompilethe element into an executable,bi-directionally bound application.

Things to keep in mind

There a few things to keep in mind regardless of automatic or manual bootstrapping:

  • While it's possible to bootstrap more than one AngularJS application per page,we don't actively test against this scenario. It's possible that you'll run into problems,especially with complex apps,so caution is advised.
  • Do not bootstrap your app on an element with a directive that usestransclusion,such asngIf,ngIncludeandngView. Doing this misplaces the app$rootElementand the app'sinjector,causing animations to stop working and making the injector inaccessible from outside the app.

Deferred Bootstrap

This feature enables tools likeBatarangand test runners to hook into angular's bootstrap process and sneak in more modules into the DI registry which can replace or augment DI services for the purpose of instrumentation or mocking out heavy dependencies.

Ifwindow.namecontains prefixNG_DEFER_BOOTSTRAP!whenangular.bootstrapis called,the bootstrap process will be paused untilangular.resumeBootstrap()is called.

angular.resumeBootstrap()takes an optional array of modules that should be added to the original list of modules that the app was about to be bootstrapped with.

Angular.js与Bootstrap相结合实现手风琴菜单代码_AngularJS

Angular.js与Bootstrap相结合实现手风琴菜单代码_AngularJS

标题定的是angularjs与bootstrap相结合实现手风琴菜单，其实也就是用的bootstrap的样式。

在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。

主要练习自定义指令，向指令中传递参数，老规矩先上效果图：

<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>
登录后复制

上面是我自定义的指令，菜单存在标题和内容3条用了 ng-repeat来渲染。

指令基本API如下：

app.directive(''myDirective'',function(){
return {
//restrict: 默认为A（属性，默认值）<div my-directive=''''></div> E（元素）C（类名）M（注释）
//这里考虑到浏览器的兼容性通常我们用所有浏览器都认识的A类型
restrict: ''A'',
//优先级设置,默认是0,较大的优先调用
priority: 0,
//这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。
terminal: false,
//字符串或函数: 字符串<a></a>(指令内容)
//注：必须存在一个根DOM元素
//一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串 
//function(tElement, tAttrs) { ... }
template: '''', 
//从指定的url地址加载模板
templateUrl: '''',
//如果设置了这个参数，值必须为true
replace: false,
//指定指令的作用域
scope:'''',
//
transclude:'''',
//string
//function(scope, element, attrs, transclude, otherInjectables) { ... }
controller:'''',
//
controllerAs: '''',
//
require: '''',
//以编程的方式操作DOM，包括添加监听器等
link: function postLink(scope, iElement, iAttrs) {},
//
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { },
post: function(scope, iElement, iAttrs, controller) { }
}
// 或者
return function postLink() { }
};
};
})
登录后复制

如何切换的时候让其他的隐藏呢，这里主要用到指令ng-show，记录当前点击的，来隐藏其他的。

具体代码注释如下：

<style type="text/css">
.con {
margin: 0 auto;
width: 600px;
margin-top: 100px;
}
.panel {
width: 580px;
}
.panel-heading {
cursor: pointer;
}
</style>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" />
<divng-app="myApp" ng-controller="myCtrl">
<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script type="text/javascript">
var app = angular.module(''myApp'', []);
app.directive(''myPage'', function () {
return {
restrict: ''EA'',
replace: true,
transclude: true, //是否将元素内容转移到模版中
scope: {
title: "=pageTitle"
},
template: [
''<div>'',
''<divng-click="toggle();">'',
''<h3>{{title}}</h3>'',
''</div>'',
''<divng-show="showMe" ng-transclude></div>'',
''</div>''
].join(""),
link: function (scope, element, attrs) {
scope.showMe = false;
scope.$parent.addExpander(scope); //保存所有菜单
scope.toggle = function toggle() {
scope.showMe = !scope.showMe; //隐藏显示
scope.$parent.goToExpander(scope);
}
}
};
})
app.controller(''myCtrl'', function ($scope) {
$scope.expanders = [{
title: ''AngularJS'',

text: ''AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。''


}, {
title: ''jQuery'',
text: ''JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。''
}, {
title: ''Bootstrap'',
text: ''Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。''
}];
var expanders = []; //记录所有菜单
$scope.addExpander = function (expander) {
expanders.push(expander);
};
$scope.goToExpander = function (selectedExpander) {
expanders.forEach(function (item, index) {
if (item != selectedExpander) { //隐藏非当前选项卡
item.showMe = false;
}
})
}
});
</script>
登录后复制

Angular.js与Bootstrap相结合实现表格分页代码_AngularJS

Angular.js与Bootstrap相结合实现表格分页代码_AngularJS

先给大家简单介绍angular.js和bootstrap基本概念。

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。<br /> </script>

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

最近一直学习Angular.js，在学习过程中也练习了很多的Demo，这里先贴一下表格+分页。

先上图看看最终结果：

不得不说Angular.js代码风格很受人欢迎，几十行代码清晰简洁的实现了上面的功能。

首先表格的数据源来自于，Server.js 点击下载。通过get取数后分页显示。

1.表格是通过ng-repeat来展示的，代码如下：

<table>
<tr>
<th>index</th>
<th ng-repeat="(x,y) in items[0]">{{ x }}</th>
</tr>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td ng-bind="x.Name"></td>
<td ng-bind="x.City"></td>
<td ng-bind="x.Country"></td>
</tr>
</table>
登录后复制

$index是repeat的默认参数。表格的列头是通过数据源（json）的第一行循环取的key值。当然要是Bootstrap要指定table的Class是table table-bordered。

2.分页是也是用ng-repeat，不得不说ng-repeat是常用指令。

分页代码如下：

<nav>
<ul>
<li>
<a ng-click="Previous()">
<span>上一页</span>
</a>
</li>
<li ng-repeat="page in pageList" ng->
<a ng-click="selectPage(page)" >{{ page }}</a>
</li>
<li>
<a ng-click="Next()">
<span>下一页</span>
</a>
</li>
</ul>
</nav>
登录后复制

这里用了ng-click事件指令。还用到ng-class指令

ng-
登录后复制

上面的代码是为了分页选中的样式。

这个表格加分页是假分页，从后端取一次数据，通过不同的分页显示json的筛选数据。

具体代码+注释：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title> 
</head>
<body>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
#divMain {
width: 500px;
margin: 0 auto;
margin-top: 100px;
}
nav {
position: relative;
width:100%;
height: 50px;
}
.pagination {
right: 0px;
position: absolute;
top: -30px;
}
nav li {
cursor: pointer;
}
</style>
<div id="divMain" ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<th>index</th>
<th ng-repeat="(x,y) in items[0]">{{ x }}</th>
</tr>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td ng-bind="x.Name"></td>
<td ng-bind="x.City"></td>
<td ng-bind="x.Country"></td>
</tr>
</table>
<nav>
<ul>
<li>
<a ng-click="Previous()">
<span>上一页</span>
</a>
</li>
<li ng-repeat="page in pageList" ng->
<a ng-click="selectPage(page)" >{{ page }}</a>
</li>
<li>
<a ng-click="Next()">
<span>下一页</span>
</a>
</li>
</ul>
</nav>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
$http.get("Service.js").then(function (response) {
//数据源
$scope.data = response.data.records;
//分页总数
$scope.pageSize = 5;
$scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分页数
$scope.newPages = $scope.pages > 5 &#63; 5 : $scope.pages;
$scope.pageList = [];
$scope.selPage = 1;
//设置表格数据源(分页)
$scope.setData = function () {
$scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//通过当前页数筛选出表格当前显示数据
}
$scope.items = $scope.data.slice(0, $scope.pageSize);
//分页要repeat的数组
for (var i = 0; i < $scope.newPages; i++) {
$scope.pageList.push(i + 1);
}
//打印当前选中页索引
$scope.selectPage = function (page) {
//不能小于1大于最大
if (page < 1 || page > $scope.pages) return;
//最多显示分页数5
if (page > 2) {
//因为只显示5个页数，大于2页开始分页转换
var newpageList = [];
for (var i = (page - 3) ; i < ((page + 2) > $scope.pages &#63; $scope.pages : (page + 2)) ; i++) {
newpageList.push(i + 1);
}
$scope.pageList = newpageList;
}
$scope.selPage = page;
$scope.setData();
$scope.isActivePage(page);
console.log("选择的页：" + page);
};
//设置当前选中页样式
$scope.isActivePage = function (page) {
return $scope.selPage == page;
};
//上一页
$scope.Previous = function () {
$scope.selectPage($scope.selPage - 1);
}
//下一页
$scope.Next = function () {
$scope.selectPage($scope.selPage + 1);
};
});
})
</script>
</body>
</html>
登录后复制

关于Angular.js与Bootstrap相结合实现表格分页代码小编就给大家介绍这么多，希望对大家有所帮助！

AngularJs bootstrap搭载前台框架——准备工作

AngularJs bootstrap搭载前台框架——准备工作

1.关于什么是AngularJs以及什么是bootstrap我就不多说了，简单说下，AngularJs是一个比较强大前台MVC框架，bootstrap是Twitter推出的一个用于前端开发的开源工具包，可以迅速搭建web前台，可以去官网看看（AngularJs：http://angularjs.org/ ，bootstrap：http://twitter.github.io/bootstrap/）。

2.github上有一个比较好的纯净AngularJs app的种子，可以去github下载，地址：https://github.com/glitchtank/angular-seed-master。

3.我们把下载的angular-seed-master-master.zip解压到某个文件夹，然后会看到这个app的项目组织，如下：

页面等。

文件

包括controller、filter、service等

包括Angular和Bootstrap相关的库

别的就是一些html文件

其他文件夹暂时不需要知道，大概就是一些脚本（关于node的），还有一些用于Angular测试的

4.我们项目需要用node来启动，如果不太清楚，没关系，看我另一篇博客：http://blog.csdn.net/jthink_/article/details/9707895（linuix和windows下的差不多，实在不会就google吧）。

5.由于我们是在windows下，所以我们打开一个cmd，进入到angular-seed-master-master文件夹，然后键入命令node scripts/web-server.js（或者用supervisor scripts/web-server.js 如果安装了supervisor）。

6.打开chrome浏览器（这边推荐使用chrome，或者使用firefox，64位的操作系统可以使用waterfox），输入地址：http://localhost:8000/app/index.html，你就可以看到一个简单的页面出来了，别看它简单，麻雀虽小五脏俱全，所有的MVC相关的都包括了。

以上就是对Bootstrap 搭载前台框架的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

文章：

今天的关于AngularJs bootstrap搭载前台框架——js控制部分和angular前端框架的分享已经结束，谢谢您的关注，如果想了解更多关于 AngularJS 学习笔记---Bootstrap、Angular.js与Bootstrap相结合实现手风琴菜单代码_AngularJS、Angular.js与Bootstrap相结合实现表格分页代码_AngularJS、AngularJs bootstrap搭载前台框架——准备工作的相关知识，请在本站进行查询。

本文标签：

上一篇AngularJs bootstrap搭载前台框架——基础页面（angular前端框架）

下一篇织梦CMS系统的安装教程（织梦cms怎么安装）

相关文章