- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
Javascript & JavaScript Application AngularJS Tutorial - Building a Web App in 5 minutes
2016.11.20 14:55
AngularJS Tutorial - Building a Web App in 5 minutes
Nick has more than 20 years of experience building web applications for companies like Chase, Nintendo, and General Electric.
1 Introduction
What’s the essential advantage of Angular? Whether you’re a beginner building your own website, or a professional seeking an edge on how to learn better app building, this AngularJS tutorial is a great investment of 5 minutes to learn the best practices of creating apps from a veteran software engineer and AngularJS expert.
DOWNLOAD: The Github repository of this AngularJS web app is available here.
2 Is it easy to build my own web app?
Yes. In the future (now) a creative person with even a modest knowledge of HTML, CSS and Javascript can build a proper contemporary “single page” web site. Out there on The Internet, Super-hardcore geeks are working together to solve all of the common problems of web development by building modular, reusable solutions. These open source projects put simple, powerful tools in the nimble hands of creative people. Powerful tools like AngularJS.
3 AngularJS Tutorial: Business Website
A local company, ACME Manufacturing, has asked us to build a new www.acme.com. The basic areas will be:
- Pages
- Home
- Services
- Pricing
- About
- FAQ
- Contact
- Blog
- List of Posts
- View Post
To skip over the construction of a basic static website, we’ll implement a free website theme based on Bootstrap. For this example we'll use, http://startbootstrap.com/modern-business. We download the website template and unzip it.
The original file structure is as one might expect in such a website template. We have a css folder, js folder, and a whole lot of html files.
4 Best Practices: Why Do We Care?
Let’s focus on index.html for a moment.
What do we aspire for our index.html to be? Anyone who’s played with web development at all has seen plenty of versions of index.html. But what’s the best practice, and why do we care?
Here’s how the free website template’s index.html looks in the browser:
There’s the Navigation (at the top), and the Home Page of the site (all the content in the middle). Everything looks fine.. right?
4.1 Good Code vs. Bad Code
Behind the scenes, this free website template’s code is a mess.
If we use this website template as-is, the mess is going to keep forcing us to do extra work over and over again, creating needless drag for all coders working on this project, for as long as it stays online.
The problem is, this and every other .html file in this free website theme (e.g. about.html, services.html, etc.) contains an extra copy of each and every piece of the whole website!
That’s an awful lot of repeated HTML. And one contemporary web development mantra that has brought a significant increase of quality across the industry is: DON'T REPEAT YOURSELF.
4.2 AngularJS is a Great Solution
Angular is both the fastest road to a Minimally Viable Product, and the most Future-Proof way for us to implement a proper contemporary “single page” web app that will address all foreseeable needs, from the simplest Website to the most complicated Web Application.
We dream of an index.html that functions as a standard for our entire website, in order to help us avoid repeating ourselves in all those other html files. In this dream future, we could change a site wide element (such as the navigation menu at the top of the page) with a single line of code, to alter its appearance across all of the pages of the website at once!
For simplicity, we’re going to pull it off with just regular ol’ static html, css, and javascript files hosted on any basic website hosting service.
4.3 Better App Development
We’ll download a new index.html from the open source project HTML5 Boilerplate (replacing the one we downloaded from the free website theme) because the index.html from HTML5 Boilerplate implements superior site wide practices.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<!-- Meta-Information -->
<!-- etc… -->
<!-- Vendor: Bootstrap Stylesheets http://getbootstrap.com -->
<!-- etc… -->
<!-- Our Website CSS Styles -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--[if lt IE 7]>
<!-- etc… -->
<![endif]-->
<span class="highlight"><!-- Our Website Content Goes Here --></span>
<!-- Vendor: Javascripts -->
<!-- etc… -->
<!-- Our Website Javascripts -->
<script src="js/main.js"></script>
</body>
</html>
Notice (“Our Website Content Goes Here”) we’ve gutted the inside of the index.html , so all we are left with is a best-practice blank canvas.
4.4 Blank Canvas
Now, let’s open this index.html file in our web browser.
It appears to be completely empty.
Fear not! All is well. This blank canvas is the foundation of our ability to separate our site wide concerns such as browser compliance and linking vendor dependencies. All of those things are functioning correctly in the background, thanks to our new index.html.
5 What exactly is AngularJS?
Google describes Angular as “what HTML would have been, had it been designed for building web-apps”. Bearing that in mind, let’s take another look at our index.html, this time using Firefox Developer Tools’ Firebug 3D View: 
We see that HTML is already capable of describing a very organized Document Object Model (DOM). The essential point of Angular is that we can harness the existing model to create interactive experiences, instead of cluttering the code with new paradigms. Interaction is driven by real people through their screens. Angular brings the DOM to life; our page will be born interactive, without the clutter of having to write computer code for every single aspect of things (e.g. loading sub-page templates, or populating lists of items from data) that are actually relatively easy to say in plain language. When Angular loads (and this is why we placed our 1 line of code at the end of the ) it will look at the page and bring it to life based on extra information we have placed inside of our HTML tags.
6 AngularJS is Easy to Implement
Enter the Dragon: Angular.
Like any good clean vendor dependency, this super-weapon is ours to wield in only a single line of code.
We add this 1 line just before the end of the of our index.html:
<html>
<body>
<span>this app is so cool</span>
<p>it’s straight up magic</p>
<span class="highlight"><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script></span>
</body>
</html>
7 Excellent architecture with AngularJS
7.1 Use Templates for Site Wide Elements
Probably the most obvious site wide element we’d like to unify in a single location is the Navigation menu. Almost every Website or App has one.
We’ll dream big, and create a file templates/header.html that contains only the Navigation menu HTML, without anything else cluttering up the file.
Furthermore, we won’t repeat ourselves! We’ll remove all the other copies of the HTML of the navigation menu from all of the other .html files in our website.
Here’s our final templates/header.html:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- etc… -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul>
<li><a href="<span class="highlight">#/services</span>">Services</a></li>
<li><a href="<span class="highlight">#/pricing</span>">Pricing Table</a></li>
<li><a href="<span class="highlight">#/about</span>">About</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Highlighted above, we’re dreaming really big with our URLs. Using a very powerful aspect of Angular called Routes, we’ll be able to bring those hashes to life as well!
7.2 Dynamically Load HTML Partials for Content Pages
Now, how awesome would it be if we could somehow transform all of those other .html files from the free website theme?
We would like to remove all the redundant copies of the .. and .. and all the other HTML. After all, we no longer want all those parts, now that we’re using our much better HTML5 Boilerplate index.html.
We would like all those other .html files to be trimmed down, containing only the parts of the content that are unique to each page.
Let’s start with the About page. We’ll cut out just the content from the original .html file from the free website theme. Then create a new file, partials/about.html and paste only the unique content for the About page into this new .html file.
Here’s the final partials/about.html:
<div class="container">
<div class="row">
<div class="col-lg-12">
<span class="page-header">About
<small>It's Nice to Meet You!</small>
</span>
</div>
</div>
<!-- etc., more information about the company…. -->
</div>
Wow! So isolated, our concerns. Organized we are.
We repeat this process for all of the other pages in our website, creating files such as partials/pricing.html and partials/services.html, etc.
7.3 Use AngularJS Directives to Enable Page Interaction
Are we ready to learn Kung Fu? We add a few Angular custom attributes to some otherwise standard HTML tags. Take a look at our new index.html:
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<!-- Meta-Information -->
<!-- etc… -->
<!-- Vendor: Bootstrap Stylesheets http://getbootstrap.com -->
<!-- etc… -->
<!-- Our Website CSS Styles -->
<link rel="stylesheet" href="css/main.css">
</head>
<body <span class="highlight">ng-app="tutorialWebApp"</span>>
<!--[if lt IE 7]>
<!-- etc… -->
<![endif]-->
<!-- Our Website Content Goes Here -->
<div <span class="highlight">ng-include='"templates/header.html"'</span>></div>
<div <span class="highlight">ng-view</span>></div>
<div <span class="highlight">ng-include='"templates/footer.html"'</span>></div>
<!-- Vendor: Javascripts -->
<!-- etc… -->
<span class="highlight"><!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script></span>
<!-- Our Website Javascripts -->
<script src="js/main.js"></script>
</body>
</html>
Instead of cluttering up our index.html with a lot of content that’s proprietary to the individual sub-pages, we’ve used Angular Directives isolated it to a stack of side-wide horizontal layers of functionality.
The ng-app directive binds the Angular app to this single page’s html body.
<body <span class="highlight">ng-app="tutorialWebApp"</span>>
The ng-include directive effortlessly performs all of the heavy lifting required to load our isolated site wide template file templates/header.html.
<div <span class="highlight">ng-include='"templates/header.html"'</span>></div>
Awesomely, the ng-view directive provides an automatic container, into which Angular Routes will seamlessly include our page content templates/*.html
<div <span class="highlight">ng-view</span>></div>
7.4 Use AngularJS Routes to handle virtual URLs
We’ll simply write some Javascript inside of the now-empty js/main.js file. As foretold, Angular Routes provides the framework to load partial html pages, e.g. partials/page.html is loaded when a user clicks on the URL #/page An Angular Controller connects the dots, enabling all of the “if this then that” to actually allow our website or web app to function.
/**
* Main AngularJS Web Application
*/
var app = angular.module('tutorialWebApp', [
'ngRoute'
]);
/**
* Configure the Routes
*/
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", <span class="highlight">controller: "PageCtrl"</span>})
// Pages
.when("/about", {templateUrl: "partials/about.html", <span class="highlight">controller: "PageCtrl"</span>})
.when("/faq", {templateUrl: "partials/faq.html", <span class="highlight">controller: "PageCtrl"</span>})
/* etc… routes to other pages… */
// Blog
.when("/blog", {templateUrl: "partials/blog.html", <span class="highlight">controller: "BlogCtrl"</span>})
.when("/blog/post", {templateUrl: "partials/blog_item.html", <span class="highlight">controller: "BlogCtrl"</span>})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html", <span class="highlight">controller: "PageCtrl"</span>});
}]);
See the highlighted sections above? We’ve touched on the final concept of this tutorial, Angular Controllers. In the next and final step, we’ll create each of these Controllers we’ve described in the route configuration above.
7.5 Use AngularJS Controllers to bring it all together
An Angular Controller connects the dots, enabling all of the “if this then that” to actually allow our website or web app to function.
/**
* Controls the Blog
*/
app.controller('BlogCtrl', function (/* $scope, $location, $http */) {
console.log("Blog Controller reporting for duty.");
});
/**
* Controls all other Pages
*/
app.controller('PageCtrl', function (/* $scope, $location, $http */) {
console.log("Page Controller reporting for duty.");
// Activates the Carousel
$('.carousel').carousel({
interval: 5000
});
// Activates Tooltips for Social Links
$('.tooltip-social').tooltip({
selector: "a[data-toggle=tooltip]"
})
});</pre>`</div>
8 Best Practice = Best Outcome
AngularJS is actually made of science, but it sure does feel like magic.
Our final product looks a lot like the original (a bunch of .html files) except it’s lightning-fast and operates within a single page. More importantly, it’s ready for much, much more bells and whistles as we delve deeper into the other things that AngularJS can do.
View the final working demo: http://airpair.github.io/demos/2014/09/T0021-airpair-angularjs-tutorial
Final source code is available on GitHub: https://github.com/airpair/T0021-airpair-angularjs-tutorial
9 Follow Up: Say Hi!
I hope you’ve enjoyed this AngularJS tutorial as much as I enjoyed deep-diving into these methodologies. I’m passionate about quality engineering and user-driven machine interaction design. If these methodologies have been helpful, or if you have a specific question about Angular, please let me know I’ll be happy to work with you. www.nickkaye.com
[출처] https://www.airpair.com/angularjs/building-angularjs-app-tutorial
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
