Angular Archives ⋆ Bossable
  • Latest
  • Store
  • Mean Stack
  • 30 Day MEAN Stack Challenge
  • Web Apps
  • Tech
  • Say Hello
Home \ Tag "Angular"

Angular

Date Title Views Comments
  • Date
  • Title
  • Views
  • Comments

Quick overview for starting an Android App using Angular

0 0

I’m really interested to see just how far the Angular Web/Mobile development experience has grown over the last few years. So, let’s get into the nitty gritty of starting an Android app using Angular.

AngularJS Material Design Toolbar Tips and Tricks

5433 0

We look through the AngularJS Material Design starter app, with tips and tricks for Toolbars: including, layout=”row”, layout=”column”, md-tall, tabs and themes.

AngularJS Material Design Side Project Sneak Peak

1552 3

I’ve been playing around with Angular Material a lot lately, and I’ve been really impressed with how easy it is to create pretty web apps, (once you get the hang of it).

There are so many cool things that I’d like to share, but I don’t know where to begin! So in this video, I’ll take you through my latest side project, and show you the types of things that are possible.

AngularJS Material Starter App in the Mean Stack

6012 15

In this post, we’ll take the angular material starter app discussed during ng-conf 2015, and apply it to a MEAN Stack App.

AngularJS Material Design in your MEAN Stack

3532 11

In this video we’ll add the angular-material package to meanjs, and set up the mean stack to use the angular material toolbar header.

Install MEAN.js 0.4.0 and run using Gulp

2698 31

It’s time to take MEAN.js version 0.4.0 for a spin! We’ll go through the installation process using the new generator, and run the new app using gulp.

Get AngularJS Batarang Working in Chrome

809 4

Quick steps to show you how to remove your existing version of AngularJS Batarang, and how to install a ‘working’ version.
So you can see your Angular Scopes and Models again!

Add an AngularJS module to your MEAN Stack App

1273 4

I’ve been getting a few questions on how to go about adding external/custom modules to a MEAN Stack app. If the module is vanilla JavaScript, it’ll need some additional work to create one or more directives, but assuming you have an Angular module, such as one from this site: http://ngmodules.org/, then the process is fairly […]

MEAN Stack: Create an AngularJS Controller with Yeoman

426 0

In this video we’ll use the yeoman generator to create new Angular.js Controller and test files.

MEAN Stack: Create an AngularJS Directive with Yeoman

400 0

In this video we’ll use the yeoman generator to create a new Angular.js directive.

MEAN Stack – Deploy to Nodejitsu

483 0

In this video we’ll deploy our app to Nodejitsu. Installing the npm package ‘jitsu’, Using the jitsu package, Updating our package.json file for Nodejitsu

MEAN Stack – Deploy to Heroku – Day 30(i)

2255 18

In this video we’ll deploy our app to Heroku

We look at:
– Downloading the Heroku toolbelt from https://toolbelt.heroku.com/
– Signing up to Heroku from https://www.heroku.com/
– Deploying to Heroku

MEAN Stack – Prepare the Build Package for Deployment – Day 30

1576 6

In this video we’ll prepare our mean.js app and get it ready to deploy!!

We look at:
– Using the Grunt Build command to create our application files
– Setting up a new MongoDB for production
– Hooking our new MongoDB instance in our production file
– Commit our file changes using Git

Woohoo now we’re ready to deploy!

MEAN Stack – Express.js & Client-side Assets – Day 29

1157 0

In this video we’ll look at express.js, and how it hooks together the back-end of our MEAN app. We’ll also look at setting up client side CSS and JS assets for our app, both core and minified versions.

We look at:
– Expressjs.com documents and key pages to start with
– The different packages that make up the express portion of the MEAN Stack
– The Server.js file, and how it is used to connect off to a number of other files that run our app
– The Express.js file, and how different elements of the app files are loaded and used by Express.
– The environment files that are used to load CSS and JS assets for our app
– Loading core and minified files as assets for our app
– Loading assets and connecting to MongoDB in a production environment

MEAN Stack – Answering Q’s with CSS & AngularJS directives – Day 28

1012 3

In this video we’ll clean up our app and answer some questions sent through via email and posted on the Bossable.com site. We’ll fix some errors, pretty up our customers list, add a picklist using ng-options, and fix the alignment between channel and email.

We look at:
– Fixing some of the task errors identified by Grunt
– Using Chrome to test out adding some padding between the customer records in the customers list
– Adding a new class with padding to our customers css file
– Using ng-class to add some colours to the customers list based on the referred field.
– Increase the size of the icon on the customers list
– Adding drop down values to our app using ng-options
– The AngularJS documentation and examples for ng-options
– Adding ng-options to our controller and edit customers client view
– Testing our new picklist in the Update Customer Modal
– Fixing the alignment of fields between the Channel and Email fields.

MEAN Stack – AngularJS Notification Service – Day 27

1361 4

In this video we’ll create our own notification service using an AngularJS Factory with publication and subscription methods. We’ll use this service to send messages between our Create Customer Modal, and our Customer List to refresh the list when a new customer is created.

We look at:
– Creating a new AngularJS notification Factory Service
– Setting up functionality within the Service to send a message and data
– Setting up functionality with the Service to receive a message and data
– Hooking up our Create Customer Controller with the new notification service
– Using the new notification service to send data when a new customer is created
– Hooking up our Customer List directive with the new notification service to update the list when a new customer is created
– Creating a new customer to test out our new Service

MEAN Stack – Style our AngularJS Create Modal & Delete Customers – Day 26

1164 2

In this video we’ll style our AngularJS Create Customer Modal, and create our first customer using our new Modal. We’ll then add functionality to delete Customers from our list.

We look at:
– A quick recap of opening up our new Create Customer Modal
– Changing the ng-class reference for the Referred field (from danger to pink)
– Making the Surname field a required field
– Creating a reference from our model fields back to our controller
– Creating a new customer using our Create Customer Modal
– Checking our console logs to tell if our record was saved
– Refreshing the page to show our new customer record
– The functions that are still missing from our Controllers
– Adding ‘Delete’ functionality to our controller
– Adding a new button with ng-click to call the delete functionality
– Deleting a customer record from our list of customers

MEAN Stack – Create Customer AngularJS Modal – Day 25

1367 14

In this video we’ll start to set-up our AngularJS Create Customer Modal. We’ll begin by turning our create customer view into a Modal window, and get it to popup using the ‘New Customer’ button.

We look at:
– The current create customer view
– Changing the top and bottom of the create customer view to align it with the update customer modal
– Changing our references to refer to the customer create controller
– Changing the controller alias references on the new Create Modal buttons
– Setting up the Create Customer Controller by reusing the existing create function and changing it up
– Using the code for the update customer modal directive as a template to create a new create customer modal directive.
– Adding a reference to our new Modal from the Customer List ‘Create Customer’ button
– Opening up our new Create Customer Modal

MEAN Stack – Custom tags with AngularJS directives – Day 24

1169 4

In this video we’ll create our own custom AngularJS directive. We’ll look at pulling out our list of customers and putting it into its own template, we’ll then glue the view and list back together using a directive.

We look at:
– An introduction to directives
– Locating Angular directives within our code
– Different types of directives
– The AngularJS documentation on directives
– Referring to directives using camel-case
– Creating our own custom elements/tags
– Moving our reusable code into a template
– Gluing our custom elements and template together using a directive
– Cleaning up our customer routes

MEAN Stack – Modal Styling & AngularJS Form Validation – Day 23

1682 15

In this video we’ll make some final changes to our Update Customer Modal instance using Angular UI. We’ll use the AngularJS data-model references and classes, as well as an introduction to Form validation with AngularJS.

We look at:
– A recap of our Angular UI Customer Update Modal
– Using the AngularJS curly brackets to display the name of customer in the Modal
– Updating the refererence to the ‘referred’ data model
– Updating the colour of the User glyphicon when the referred icon is checked using ng-class
– Form validation by adding mandatory fields to our Modal
– Adding a Form name to reference our Form from our Controller
– Checking to see if a Form is valid from within our Controller
– Disabling the Save & Close button when the Form is invalid

Bossable - From idea to boss, with fun and friendly tutorials and videos
  • © Bossable 2015
  • Tech
  • Mean Stack
  • Contact Us
  • Privacy
  • Terms
  • Close
  • Latest
  • Store
  • Mean Stack
  • 30 Day MEAN Stack Challenge
  • Web Apps
  • Tech
  • Say Hello