Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
IMPORTANT: This course is for Angular v1 ONLY
AngularJS was built to make you a better, more productive and happier developer. It's the framework enabling a new era in rich client side web experiences. It's the future.
This is a hands-on course taught by an experienced AngularJS developer who's built dozens of angular apps for a variety of clients including Google.
Every lecture in this course ties into real world benefits or applications, after only the first chapter you'll have the knowledge to add amazing AngularJS features to your current project.
Through a series of real-world examples you will learn the skills needed to build fully functional single page applications in AngularJS.
Learn battle proven techniques in AngularJS to solve common problems every web developer faces on a daily basis, such as:-
This course is taught hands-on, you learn by doing. Follow along as we go through two example AngularJS applications the first a simple lowly form which we give super powers the second a complex single page contacts application where you will learn:-
You'll learn how to implement functionality that's expected in todays applications in a fraction of the time using AngularJS compared to other frameworks.
I envy you I really do. I remember the first time I discovered AngularJS, everything just clicked, I got a warm fuzzy feeling inside and my eyes glazed over. I know because every developer I've introduced AngularJS to since has had the same look in their eyes.
You are here because you know you need something that can handle that complexity, you know that the future is moving to an even more client side experience and you suspect AngularJS might be the solution, and do you know what? You're right…
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Introduction|
Who am I, why do you want to learn AngularJS from me and what you will learn on this course.
OPTIONAL: How to develop with Chrome?Preview
OPTIONAL: Which tools I use to develop with?Preview
IMPORTANT: Course structure, sample and completed code
|Section 2: How to submit and validate a form in AngularJS|
Section 2 - Introduction
Example code for Section 2Preview
DIRECTIVES: ng-init, ng-model
DIRECTIVES: ng-controller, ng-click
|Section 3: Creating a list application with searching and sorting|
Section 3 - Introduction
Example code for Section 3
In this lesson we will take you through how to select rows in our table in our example application and then style the row light grey as a visual feedback that it is selected.
DIRECTIVES: ng-sltyle, ng-click
In this lesson we will extend our contacts application so when you click on a person in the list we will display details about that person in a panel on the right hand side.
In this lesson we will add client side searching and filtering in our contacts application so an end user can type in a string into in input control and the list will be filtered accordingly.
In this lesson we will add client side ordering in our contacts application so an end user can choose how they want the results ordered, they will be able to choose via a drop down select box and also by clicking on arrow buttons in the column headers.
In this lesson we will add a message box to our contacts application so if an end user searches by a string that isn't found we can tell them, otherwise they won't know if the application is broken and not working or if the search hasn't returned any results.
|Section 4: Debugging Tools, Tips and Tricks|
CORRECTION: How to debug your Angular applications?
In this lesson we will cover how to debug your AngularJS application using the two most popular debugging plugins for Chrome.
|Section 5: Deep dive into scope|
Section 5 - Introduction
Example code for Section 5
Controllers, and therefore scope, can nest, that is to say that child scopes can inherit properties and functions from parent scopes.
The top level scope is called rootScope and all other scopes in all other controllers and directives inherit from rootScope.
|Section 6: Communicating between controllers using Services|
Example code for Section 6
Breaking out the list application into two controllers
Sharing data between controllers using rootScope
Sharing data between controllers using Services
Creating our first service
Consuming our service in our controllers
|Section 7: Connect our application to a REST API using ngResource|
Section 7 - Introduction
Example code for Section 7
What are resources?
Configuring AngularJS resources
Creating our first resource
Setting up ngInfinateScroll
Removing client side searching & sorting
Watch scope variables for changes
Server side sorting & ordering
Adding a loading spinner
Showing a warning when no results are returned
Convert the detail panel to a form
Update a contact using our resource
Delete a contact using our resource
Create a bootstrap modal using angularStrap
Reusing snippets of HTML with ng-include
Creating a contact using our resource
Promises in AngularJS with the $q service
Display images with ng-src
Adding a datepicker using angularStrap
Adding toaster messages with angularjsToaster
Adding font awesome
Adding a material design bootstrap theme
|Section 8: Create template functions with Filters|
Example code for Section 8
Creating custom filters
|Section 9: Convert the application into an SPA using uiRouter|
Section 9 - Introduction
Example code for Section 9
What is a Single Page Application?Preview
Setup and install uiRouter
Deciding on our URL routes
Creating our List route
Defining a controller for a route
Creating our Edit route
Exposing the routes parameters in the controller
Prefer ui-sref over ng-hrefPreview
Implementing the Edit route
Redirecting to another url using $state.go
Controllers vs Services
Implementing the Create route
Highlighting menu items using ui-sref-active
Multiple named views using uiRouter
A better search with ng-model-options
|Section 10: Creating reusable components with Directives|
Section 10 - Introduction
Example code for Section 10
Introduction to DirectivesPreview
Creating a directive for our spinner
Restrict and the 3 ways to define directives
Everything is just a directive
Understanding Isolate Scope =
Over 15 years experience working for clients such as the European Space Agency and Google.
Wrote my first program in 1988, my first website in 1996, earned a 1st Class Degree in Computer Science in 2000 and now 15 years later I own a digital agency in London called Bubblegum specialising in building complex web & mobile applications in AngularJS/Node/Django and IonicFramework.
As well as building applications for awesome clients word-wide, through Udemy i'm now following my dream of teaching other passionate developers like myself what I know through my company CodeCraft.
# What do I believe?
- I believe as a developer at it's heart, your job is to make the lives of other people more productive, that's what computing is all about.
- So if you yourself are not 100% focussed on making your own development as productive as possible then it doesn't bode well for your clients.
# What are my values?
- I'm 100% focused on practical development skills.
- I don't waste peoples time.
- I value my time and I value yours.
- I'm driven to be the most productive developer I can possibly be. I don't get caught up in philosophical debates.
- I value shipping “correct" functionality as fast as possible for myself and my clients.
If those are your values as well them you will love my courses.
If you want to sip your skinny decaf soya latte whilst discussing the pros and cons of different naming conventions for 3 hours then look somewhere else, if you want to learn how to ship functionality as fast as possible for yourself and your clients, these courses are for you.