Posts

Showing posts with the label AngularJS

ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json

Image
In this blog post we are going to add the jQuery, AngularJS, and bootstrap libraries to our ASP.NET Core application.  Normally we will use NuGet to bring in these libraries but ASP.NET Core gives you the option to use bower to configure the dependencies that you will need on the client-side. Here are the steps to import the client-side dependencies into our project: 1. First let's make bower.json part of the "NorthwindCafe.Web" project, by right click on the bower.json file, and then choose "Show in Solution Explorer" 2.  Open the bower.json file the markup should look like this { "name": "asp.net", "private": true, "dependencies": { } } 3. Change the markup to look like the following { "name": "asp.net", "private": true, "dependencies": { "bootstrap": "~3.3.6", "angular": "~1.5.7" } } 4. Save the bower.js...
Post a Comment
Read more

AngularJS SPA Pt 3 : Refactor Code to Not Use Global Variables (Shopping List App)

Image
In the previous blog we got Angular-Seed to work with a module and a controller.  However, we put everything in the global scope.  The problem with that is that there are many JavaScript libraries that might be using the same variables as we are, or if we are working with other developers.  The way we can mitigate this problem is to wrap our modules and controllers in an anonymous function.  Think of an anonymous function as a wrapper or a container to hold our modules and controllers.  Another term developers like to refer to anonymous function is an IIFE.  Whatever it's called it's always good practice to avoid putting things in the global environment if it can be avoided. Here are the steps to take the modules and controllers out of the global environment: 1.  First let's wrap the module in an anonymous function.  The source code for the app.js file should look like the following (function(){ 'use strict'; var app = angular.module('sho...
Post a Comment
Read more

AngularJS SPA Pt 2 : Preparing Angular-Seed For The Shopping List Application

Image
The previous blog we setup the Angular-Seed boilerplate template for our SPA application.  In this blog we are going to prepare the Angular-Seed template for our SPA application which is going to be a simple shopping list application.  The steps below describes the steps to clean up some of the pages in the angular-seed template for our application. 1.  Delete the content of the "index.html" page in the angular-seed main folder.   It is located in the main folder of the angular-seed template "/angular-seed 2.  The source code file "index.html" should look like the following <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Shopping List App</title> <link rel="stylesheet" type="text/css" href="app.css"> </head> <body> <script type="text/javascript" src="js/lib/angular.js"></script> <script type="t...
Post a Comment
Read more

Use Bower to Get Client Dependencies

Image
Bower is a JavaScript tool to get client dependencies in your project using npm packages. The requirement for bower is that you need to install Node.js first.  You can follow along in the this  blog  to install node.js, After node.js is installed open the command line and type the following command npm install -g bower The command above will install bower in your system globally.  Now we can use bower install packages individually, but the convenience of bower is in the bower.json file.  With the bower.json file we can specify all the dependencies that our project will need in one configuration file. Here are the steps: 1.  Create a folder call "AngularShoppingApp" 2.  Create a file call bower.json in your favorite text editor 3.  The content of the bower.json file should look like this { "name": "ShoppingApp", "private": true, "dependencies": { "angularjs": "~1.5.7", "bootstrap": "~3.3....
Post a Comment
Read more

AngularJS SPA Pt 1 : Setting Up Angular-Seed

Image
angular-seed is an AngularJS application skeleton template.  An application skeleton let's gives you a boiler plate template so that you don't have to start the application from scratch.  You can get the source code from https://github.com/angular/angular-seed .  Below are the steps to use angular-seed ass your application template for AngularJS. Step-By-Step Instructions : 1.  Go the page  https://github.com/angular/angular-seed 2. Open Git GUI.  if you don't have Git install you can follow this blog . 3.  In the Github angular-seed page copy the "HTTPS clone URL" 4.  In Git GUI click on the link "Clone Existing Repository" 5.  In "Source Location" paste the angular-seed clone URL that you've just copied, then on the "Target Directory" field type in or browse to the folder that you want to store the repository in on your local machine.  Then click "Clone" 6.  Click on "Expore Working Copy" to see the repositor...
Post a Comment
Read more