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:
Signin with GitHub
To see full unobfuscated code samples
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>
</div>
Signin with GitHub
To see full unobfuscated code samples
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:
Signin with GitHub
To see full unobfuscated code samples
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>>
Signin with GitHub
To see full unobfuscated code samples
The ng-include directive effortlessly performs all of the heavy lifting required to load our isolated site wide template filetemplates/header.html.
{}{}-i{}{}lu{}{}='{}{}em{}{}at{}{}/h{}{}de{}{}ht{}{}"'{}{}sp{}{}>>{}{}di{}{}
Signin with GitHub
To see full unobfuscated code samples
Awesomely, the ng-view directive provides an automatic container, into which Angular Routes will seamlessly include our page contenttemplates/*.html
<div <span class="highlight">ng-view</span>></div>
Signin with GitHub
To see full unobfuscated code samples
7.4 Use AngularJS Routes to handle virtual URLs
We’ll simply write some Javascript inside of the now-empty js/main.jsfile. 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.
/**
* Ma{}{} An{}{}la{}{}S Web Ap{}{}ic{}{}ion
*/
Signin with GitHub
To see full unobfuscated code samples
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>
Signin with GitHub
To see full unobfuscated code samples
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.
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
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
C'est avec plaisir que je regarde votre site ; il est formidable. Vraiment très agréable à lire vos jolis partages .Continuez ainsi et encore merci.
ReplyDeletevoyance gratuite par telephone