AngularJS

AngularJS 101

June 26, 2018 uploaded by Admios Facilitator

AngularJS - AngularJS 101

AngularJS course

Introduction to Angular

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Fundamentals

Open the following video for Angular 1

Open the following video for Angular 4

Controllers

Controllers are the ‘glue’ of an AngularJS application. They connect your markup with your data and act as a sort of switchboard. The “controller as” syntax was added to AngularJS 1.2. This syntax abstracts the use of $scope in controllers, simplifying the syntax of your controllers.

Tutorials

This tutorial includes controllers and controller as features, Angular JS Controllers
This tutorial shows how do controllers communicate and pass data around.Angular JS Sharing Data Between Controllers to access the tutorial.

Directives

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

Directives might just be the killer feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes. In AngularJS, hierarchical directives have the ability to communicate with one another via their defined controllers. With simple syntax/notation you are able to define links between directives and their controllers.

¹ This course requires an egghead.io account

Services

Read the following documentation about AngularJS services

Introduction to Services

Routing

Read the following documentation about AngularJS routing:

Routing and Multiple Views

Testing

This brief intro to unit testing with AngularJS takes a look at how to configure a test, compile an element, and access AngularJS within your tests.

Unit Testing Hello World with AngularJS
An Introduction to Unit Testing in Angular
In this lesson you will unit test a simple AngularJS directive
Testing a directive

Digging a little deeper into unit testing an AngularJS directive, this lesson looks at testing binding across multiple scopes.

Unit Testing Directive Scope
In this lesson you will Unit test your AngularJS directives that make changes to $scope as well as their own isolated scopes. Unit testing directive scope ¹
AngularJS provides helpers for convenient testing of your application. In this lesson you will learn how to test a basic controller with Jasmine and Angular Testing a Controller ¹ to access the tutorial.
This lesson will look at testing an AngularJS service using Jasmine Testing a Service
Protractor is an end-to-end testing framework for AngularJS applications. It allows you do drive the browser and test the expected state of your application’s pages. This sort of functional testing is an essential component of any overall testing strategy. E2E testing using Protractor ¹ to access the tutorial.

¹ This course requires an egghead.io account

Books and other Information Resources

More Tutorials

MEAN Stack
Creating a Web App From Scratch Using AngularJS and Firebase
Shaping Up with Angular.JS is an interactive tutorial from Code School where you can learn some of the basics of Angular.js and also put these in practice as you go through the course’s challenges. Shaping Up with Angular
An introduction to the AngularJS directive part 1 ¹
First Directive Tutorial

Reference Documentation

¹ This course requires an egghead.io account