Deploying AngularJS

Simpliv

Course

Online

£ 150 VAT inc.

Description

  • Type

    Course

  • Methodology

    Online

  • Start date

    Different dates available

Application development and deployment made easy with Angular.JS and Heroku.Angular.JS does exactly what it says on the box - it extends HTML to what it should be for web applications. It allows users to create applications quickly with great architecture backing it up and provides testing support, which shouldn't be underestimated. Angular.JS also has a great community surrounding it, justifying its popularity.Gulp and Node.JS are technologies that make the life of any frontend developer easier by allowing them to automate tedious tasks. Think of SASS compilation, minifying your code, and so on, all happening automatically, and at the speed of light using our build system in Gulp.Heroku is a cloud application platform that allows us to easily deploy our application to the web and scale it according to our needs. Heroku allows us to focus on writing code instead of worrying about server infrastructure.Angular.JS makes developing frontend web applications a breeze, while Gulp and Node provide an optimized and stable production version to deploy on Heroku, making application development hassle free.Deploying Angular.JS is aimed at providing best practices and the most modern tooling methods available for creating and deploying an Angular.JS application. Not only will your applications be simple and elegant, the development and deployment will also be blazingly fast.We start by outlining the application idea, then developing it, and finally deploying our app to Heroku. Before we begin, we’ll prepare our development environment and our build system. After everything is up and running, we’ll get started by constructing the supporting services that form the skeleton of our application. Then, we use those services to flesh out the app. Later, we make sure our application is optimized for production, and we deploy it to Heroku.This video course will help you develop and deploy your Angular.JS applications in a short but sweet, no-nonsense approach.

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About this course

Test your code with Karma to automate the testing process
Use JSHint to lint your code and adhere to best practices
Explore Gulp to serve a BrowserSync server and compile your SASS files
Leverage localStorage to add a basic form of persistence to your application
Prepare the AngularJS code for minification
Optimize CSS and JS assets for production
Add monitoring tools to your application to track possible application errors 
Deploy the application to Heroku

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Reviews

This centre's achievements

2021

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 4 years

Subjects

  • Production
  • Install
  • Application Development
  • Project
  • Global
  • Web
  • Scaffolding training
  • Workflow
  • HTML
  • Server
  • Testing

Course programme

Setting Up 3 lectures 10:07 Technical Requirements To use all the tools that we require to build our application and deploy it, we need to install some things first.
  • Install NodeJS
  • Set up global NodeJS modules
  • Add Heroku Toolbelt to our system
Scaffolding of the Project To get started, we’ll need a good starting point with a clear separation of concerns for our codebase architecture.
  • Initialize the Bower manifest
  • Initialize the npm manifest
  • Add local Gulp and create a basic task
A Sneak Peek of the Final Application It’s always nice to see what our hard work will amount to. This is where you get to see the final application that we’ll create along the way.
  • Explain the concept of the application
  • Show what the final application will look like
Setting Up 3 lectures 10:07 Technical Requirements To use all the tools that we require to build our application and deploy it, we need to install some things first.
  • Install NodeJS
  • Set up global NodeJS modules
  • Add Heroku Toolbelt to our system
Scaffolding of the Project To get started, we’ll need a good starting point with a clear separation of concerns for our codebase architecture.
  • Initialize the Bower manifest
  • Initialize the npm manifest
  • Add local Gulp and create a basic task
A Sneak Peek of the Final Application It’s always nice to see what our hard work will amount to. This is where you get to see the final application that we’ll create along the way.
  • Explain the concept of the application
  • Show what the final application will look like
Technical Requirements To use all the tools that we require to build our application and deploy it, we need to install some things first.
  • Install NodeJS
  • Set up global NodeJS modules
  • Add Heroku Toolbelt to our system
Technical Requirements To use all the tools that we require to build our application and deploy it, we need to install some things first.
  • Install NodeJS
  • Set up global NodeJS modules
  • Add Heroku Toolbelt to our system
Technical Requirements To use all the tools that we require to build our application and deploy it, we need to install some things first.
  • Install NodeJS
  • Set up global NodeJS modules
  • Add Heroku Toolbelt to our system
Technical Requirements To use all the tools that we require to build our application and deploy it, we need to install some things first.
  • Install NodeJS
  • Set up global NodeJS modules
  • Add Heroku Toolbelt to our system
To use all the tools that we require to build our application and deploy it, we need to install some things first.
  • Install NodeJS
  • Set up global NodeJS modules
  • Add Heroku Toolbelt to our system
To use all the tools that we require to build our application and deploy it, we need to install some things first.
  • Install NodeJS
  • Set up global NodeJS modules
  • Add Heroku Toolbelt to our system
Scaffolding of the Project To get started, we’ll need a good starting point with a clear separation of concerns for our codebase architecture.
  • Initialize the Bower manifest
  • Initialize the npm manifest
  • Add local Gulp and create a basic task
Scaffolding of the Project To get started, we’ll need a good starting point with a clear separation of concerns for our codebase architecture.
  • Initialize the Bower manifest
  • Initialize the npm manifest
  • Add local Gulp and create a basic task
Scaffolding of the Project To get started, we’ll need a good starting point with a clear separation of concerns for our codebase architecture.
  • Initialize the Bower manifest
  • Initialize the npm manifest
  • Add local Gulp and create a basic task
Scaffolding of the Project To get started, we’ll need a good starting point with a clear separation of concerns for our codebase architecture.
  • Initialize the Bower manifest
  • Initialize the npm manifest
  • Add local Gulp and create a basic task
To get started, we’ll need a good starting point with a clear separation of concerns for our codebase architecture.
  • Initialize the Bower manifest
  • Initialize the npm manifest
  • Add local Gulp and create a basic task
To get started, we’ll need a good starting point with a clear separation of concerns for our codebase architecture.
  • Initialize the Bower manifest
  • Initialize the npm manifest
  • Add local Gulp and create a basic task
A Sneak Peek of the Final Application It’s always nice to see what our hard work will amount to. This is where you get to see the final application that we’ll create along the way.
  • Explain the concept of the application
  • Show what the final application will look like
A Sneak Peek of the Final Application It’s always nice to see what our hard work will amount to. This is where you get to see the final application that we’ll create along the way.
  • Explain the concept of the application
  • Show what the final application will look like
A Sneak Peek of the Final Application It’s always nice to see what our hard work will amount to. This is where you get to see the final application that we’ll create along the way.
  • Explain the concept of the application
  • Show what the final application will look like
A Sneak Peek of the Final Application It’s always nice to see what our hard work will amount to. This is where you get to see the final application that we’ll create along the way.
  • Explain the concept of the application
  • Show what the final application will look like
It’s always nice to see what our hard work will amount to. This is where you get to see the final application that we’ll create along the way.
  • Explain the concept of the application
  • Show what the final application will look like
It’s always nice to see what our hard work will amount to. This is where you get to see the final application that we’ll create along the way.
  • Explain the concept of the application
  • Show what the final application will look like
Preparing Our Development Environment 2 lectures 12:13 Code Testing with Karma and JSHint Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.
  • Add Karma and configure it
  • Add JSHint
  • Verify that all tasks work as intended
Building the BrowserSync and SASS Workflow BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.
  • Add BrowserSync to serve our application in a local environment
  • Add SASS compilation
  • Add LiveReload and watcher tasks for SASS, HTML, and JS files
Preparing Our Development Environment 2 lectures 12:13 Code Testing with Karma and JSHint Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.
  • Add Karma and configure it
  • Add JSHint
  • Verify that all tasks work as intended
Building the BrowserSync and SASS Workflow BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.
  • Add BrowserSync to serve our application in a local environment
  • Add SASS compilation
  • Add LiveReload and watcher tasks for SASS, HTML, and JS files
Code Testing with Karma and JSHint Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.
  • Add Karma and configure it
  • Add JSHint
  • Verify that all tasks work as intended
Code Testing with Karma and JSHint Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.
  • Add Karma and configure it
  • Add JSHint
  • Verify that all tasks work as intended
Code Testing with Karma and JSHint Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.
  • Add Karma and configure it
  • Add JSHint
  • Verify that all tasks work as intended
Code Testing with Karma and JSHint Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.
  • Add Karma and configure it
  • Add JSHint
  • Verify that all tasks work as intended
Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.
  • Add Karma and configure it
  • Add JSHint
  • Verify that all tasks work as intended
Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.
  • Add Karma and configure it
  • Add JSHint
  • Verify that all tasks work as intended
Building the BrowserSync and SASS Workflow BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.
  • Add BrowserSync to serve our application in a local environment
  • Add SASS compilation
  • Add LiveReload and watcher tasks for SASS, HTML, and JS files
Building the BrowserSync and SASS Workflow BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.
  • Add BrowserSync to serve our application in a local environment
  • Add SASS compilation
  • Add LiveReload and watcher tasks for SASS, HTML, and JS files
Building the BrowserSync and SASS Workflow BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.
  • Add BrowserSync to serve our application in a local environment
  • Add SASS compilation
  • Add LiveReload and watcher tasks for SASS, HTML, and JS files
Building the BrowserSync and SASS Workflow BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.
  • Add BrowserSync to serve our application in a local environment
  • Add SASS compilation
  • Add LiveReload and watcher tasks for SASS, HTML, and JS files
BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.
  • Add BrowserSync to serve our application in a local environment
  • Add SASS compilation
  • Add LiveReload and watcher tasks for SASS, HTML, and JS files
BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.
  • Add BrowserSync to serve our application in a local environment
  • Add SASS compilation
  • Add LiveReload and watcher tasks for SASS, HTML, and JS files
Constructing the Supporting Services 2 lectures 11:24 The Storage Service We’ll use localStorage to store data for some persistence. Think of data like favorite animals, past matches, and so on.
  • Add Angular dependencies and bootstrap the application
  • Link the external localStorage module
  • Implement the storage service
The Animals Service Our application obviously needs some data. We’ll add a list of animal data and write a service to query that data.
  • Add animal data
  • Create test spec for Animals service
  • Construct Animals service to pass the test specifications
Constructing the Supporting Services. 2 lectures 11:24 The Storage Service We’ll use localStorage to store data for some persistence. Think of data like favorite animals, past matches, and so on.
  • Add Angular dependencies and bootstrap the application
  • Link the external localStorage module
  • Implement the storage service
The Animals Service Our application obviously needs some data. We’ll add a list of animal data and write a service to query that data.
  • Add animal data
  • Create test spec for Animals service
  • Construct Animals service to pass the test specifications
The Storage Service We’ll use localStorage to store data for some persistence. Think of data like favorite animals, past matches, and so on.
  • Add Angular dependencies and bootstrap the application
  • Link the external localStorage module
  • Implement the storage service
The Storage Service We’ll use localStorage to store data for some persistence. Think of data like favorite animals, past matches, and so on.
  • Add Angular dependencies and bootstrap the application
  • Link the external localStorage module
  • Implement the storage service
The Storage Service We’ll use localStorage to store data for some persistence. Think of data like favorite animals, past matches, and so on d show that information.
  • Add Angular-UI router to project
  • Scaffold the Arena view and controller
  • Generate a matchup with slight delay and show it in the...

Additional information

Basic Knowledge of Angular.JS is required

See related categories

Deploying AngularJS

£ 150 VAT inc.