使用AngularJS, Bootstrap和ColdFusion构建企业应用

4星 · 超过85%的资源需积分: 9 91 浏览量更新于2024-07-20 1 收藏 2.48MB PDF 举报

"Learn.With.AngularJS.Bootstrap.and.ColdFusion" 是一本教导企业级编程技术的书籍，通过构建一个应用来教授读者如何使用AngularJS、Bootstrap和ColdFusion。作者是Jeffry Houser，他是一位技术创业者，拥有丰富的编程经验，尤其在AngularJS和Flex开发领域。本书的主要内容分为8个章节，逐步指导读者建立一个任务管理应用，旨在模拟企业客户通常需要的功能，从而为程序员的实际工作做好准备。以下是每个章节的概述： 1. 应用概述和设置：本章将介绍整个项目的目标和架构，以及如何配置开发环境。读者将学习如何设置AngularJS、Bootstrap和ColdFusion的基础框架，以便后续章节的实现。 2. 登录：这一章会讲解如何构建用户登录系统，包括验证用户身份和处理认证的过程。这涉及AngularJS的服务和指令，以及ColdFusion的安全机制。 3. 显示任务：这一部分将教授如何使用AngularJS的数据绑定和路由来动态显示任务列表。同时，也会涉及到Bootstrap的UI组件，如表格和卡片，用于美化界面。 4. 过滤任务：读者将学习如何添加过滤功能，让用户可以根据不同条件筛选任务。这将涉及到AngularJS的过滤器和控制器。 5. 创建和编辑任务：本章将介绍如何创建新任务和编辑已有任务，包括表单验证和数据提交。这里会用到AngularJS的表单处理和ColdFusion的服务端处理。 6. 定时任务：这一章节将讨论如何安排任务的执行时间，可能涉及到AngularJS的定时器和ColdFusion的定时任务服务。 7. 标记任务完成：读者将学习如何设计并实现标记任务已完成的机制，这可能包括状态更新和UI反馈。 8. 实现用户角色：最后，书中的内容会涵盖权限管理和用户角色，使不同的用户看到或操作不同的任务。这将涉及AngularJS的角色基础授权和ColdFusion的用户管理功能。通过这本书，读者不仅能掌握AngularJS、Bootstrap和ColdFusion的基本用法，还能了解到如何将这些技术整合到实际的企业级应用中，提升自己的编程技能和对企业级解决方案的理解。对于想要从Flex开发转向AngularJS的开发者来说，本书提供了宝贵的过渡资源。

It is an important thing to remember when you are accessing the same Angular module across multiple

files.

The code calls the config() function on the Angular module. The config function contains a single

argument, which is an array. Angular’s version of dependency injection is used to insert the Angular

$routeProvider service into the config function. In short hand, it is like this:

['$routeProvider', function ($routeProvider) {}]

The array is passed as a parameter into the config() function. The array primarily contains strings, but

the final argument is a function. For each string in the array, AngularJS will look for an AngularJS service.

It will either be defined by Angular itself, or something you created. The services are then passed into

the function; which is always the last argument of the array. We’ll see this approach to dependency

injection used throughout this book.

The config function defines the $routeProvider. The $routeProvider is like a one big switch statement.

When the URL postfix is equal to “login”, it will display the Login.html template and activate the

controller named LoginCtrl. When the URL postfix is named ‘tasks’, the MainScreen.html template will

be displayed with the controller MainScreenCtrl. If the URL equals neither of those, then the app

redirects back to “login”. This is a very powerful concept.

Next, we are going to create the two controllers. Afterwards, we’ll examine the two templates. For the

moment, both the controllers and the templates are going to be stubs with very little functionality. We’ll

expand on them in later chapters.

The Controllers

The next step is to create the two controllers referenced in the $routeProvider of the Nav.js. I created a

directory com/dotComIt/learnWith/controllers to contain the controllers. The first file to examine is

the LoginCtrl.js:

angular.module('learnWith').controller('LoginCtrl', ['$scope',

function($scope){

$scope.title = 'Login View';

}

]);

A controller is defined using the controller() method of the angular module. The logic is located in a

controller() function. The first argument, LoginCtrl, is the name of the controller. It matches the same

name referenced in the $routeProvider. We see the dependency injection syntax used here to inject the

$scope variable into the controller function. $scope is a special variable in the context of AngularJS Any

values or functions in the $scope can easily be accessed inside a view template. For now, only a single

variable is created in the login controller; one named title.

The next file to examine is the MainScreenCtrl.js file. It mimics the LoginCtrl setup:

angular.module('learnWith').controller('MainScreenCtrl', ['$scope',

function($scope){

$scope.title = 'Main View';

}

]);

The title variable in this controller is set to Main View instead of Login View. We’ll use the title view to

differentiate our two templates.

The main application needs to know about both controllers, so you’ll have to import them into the main

index.html page using the HTML script tag:

These two script tags should be added to the main page after the application is defined. I put these two

scripts after the Nav.js script tag.

AngularJS HTML Templates

There are two templates we need to create for our AngularJS app; one for the login screen and one for

the main screen. As with the controllers they’ll start with simple templates which we will expand upon in

later chapters. I created a views directory for the view templates at com/dotComIt/learnWith/views.

All views will go under this directory, or more likely in a subdirectory.

The Login.html file was added in a login directory under the views directory. This is it:

<h1>{{title}}</h1>

There are some important things to note about this. First, the title variable is displayed between a

double set of curly brackets that will look like this: {{}}. This is special AngularJS syntax to say, “look for a

variable named title in the controller’s $scope and put its value here.” You can use this approach to bind

to text, like we are here, but also to input controls or to anything you can put on the HTML page. You’ll

see a lot of these in the book.

The other aspect of the Login.html template is a link. This link adds the “tasks” text to the URL; which

the Angular $routeProvider will use to load the second template. I added this strictly for debugging

purposes at the moment and it will be removed as the application develops.

This is the MainScreen.html template:

<h1>{{title}}</h1>

This template is located in com/dotComIt/learnWith/views/tasks directory. It mirrors the Login.html

for now. It displays the title variable and provides a link to switch to the login view.

At this point you can load the app and you should see this view:

Create the Database

I built the database behind this application in SQL Server, as that is what most of my clients have used

over the years. If you want to set up your own local environment, there are two SQL Scripts in the

database directory of the code archive:

• GenerateDatabaseJustSchema.sql: This script will create the database schema without creating

any data.

• GenerateDatabaseSchemaAndData.sql: This script will create the database schema and pre-

populate all tables with some test data.

You can run either file that you desire, though I recommend the second one. These scripts will not

create a database file, so you’ll have to create the database first and then run these scripts against the

database you create. Table structure details will be covered in future chapters.

Setup ColdFusion

This section will set up the Application.cfc, which is the only code infrastructure needed for the

ColdFusion application.

Installing ColdFusion

The first thing you’ll need to do is install ColdFusion on your machine if you haven’t already. The Adobe

documentation on this is going to be more complete than anything I could offer here. You can use the

developer edition at no cost to test this code. Once you download the binary, stepping through the

installation wizard should be a walk in the park.

Once you have ColdFusion installed, you can create a DNS entry in the ColdFusion administrator to point

to local database we created in the previous section. The ColdFusion docs

explain how to do this in

detail. ColdFusion has built in support for most types of databases, without us having to change our

CFML code at all.

The Application.cfc

ColdFusion has a special file, the Application.cfc, which sets up some important structural information

about the application. It defines the application’s memory space along with other information; how to

set up sessions, error handling, and application specific data. The Application.cfc should go in the root

directory of the web server.

This ColdFusion application will only be used to deliver services for our UI code, so session management

is not an issue. It will use a few Application specific variables. This is the start of the Application.cfc

code:

this.name = "learnWith";

this.applicationTimeout = createTimeSpan(1,1,0,0);

this.sessionManagement = "false";

</cfscript>

</cfcomponent>

ColdFusion is primarily a tag-based language if you haven’t seen it before. A cfcomponent is analogous

to a class. The Application.cfc is a special class that the ColdFusion application server knows to look for.

In the CFScript block at the top of the file, the name of the application is defined—learnWith. The

application timeout is set to one day and one hour. This means that any application specific data will

time out after twenty-five hours of inactivity. Session management is turned off, as the server will not

be handling sessions in the same way that a traditional HTML app might make use of sessions. The UI

will handle all our session management.

Next in the file is the onApplicationStart method:

</cffunction>

The onApplicationStart method will execute whenever the application is used after the application has

timed out. For this application, I am setting three values. One is the dsn, which will point to the data

source set up in the ColdFusion administrator. The second is the datasource, which should point to the

database you created using one of the SQL Scripts. The last is a debugMode variable. I will use the

debugMode variable inside the service code to determine whether debugging output should be

displayed to the screen or not. When returning JSON to a UI making use of the service call, you want

debug mode to be turned off. However, I find it useful when testing the services from within ColdFusion.

The final value is named componentPrefix. If you build your ColdFusion code in the root directory, this

can be an empty string. In order to keep the code for each chapter separate, I’ll use this when

instantiating other CFCs.

The Application.cfc allows for code to be executed at the start of a request using onRequestStart() and

at the end of the request using onRequestEnd(). This application isn’t using onRequestEnd(), however it

does make use of onRequestStart():

</cfif>

</cffunction>

This onRequestStart() method provides an easy back door if you want to reset the application variables.

An approach like this is common in many ColdFusion applications I have worked on. Just load any page

with the URL variable reinit and the onApplicationStart() method will be manually called.

The next method is the onError() method. This method just emails the error to you as a quick form of

logging. I have also worked on apps that will display the error to the screen which is good for debugging

but less ideal for production:

剩余154页未读，继续阅读

ramissue

粉丝: 354
资源: 1487

使用AngularJS, Bootstrap和ColdFusion构建企业应用

API.zip_API_AngularJS Bootstrap_angularjs_bootstrap api

Rails.Angular.Postgres.and.Bootstrap.2nd.Edition

angularjs.ui-select.bootstrap4.shim.css:AngularJS UI中用于“ bootstrap”主题的适配器选择Bootstrap v4.x外观

ui.bootstrap.contextMenu:AngularJS Bootstrap UI上下文菜单

Packt.Responsive Web Design with AngularJS.2014

Learn With AngularJS Bootstrap and ColdFusion pdf 0分

ng.cork.router:AngularJS $router 包装器，提供导航助手

angular1.x-datos:AngularJS 项目

go-angularjs-jquery-bootstrap-boilerplate:Go + AngularJS + jQuery + Bootstrap 样板 Web 应用程序

《Node.js+MongoDB+AngularJS Web开发》源代码

最新资源