Contents tagged with AngularJS

  • Introducing the AngularU Conference

    No Comments

    In late 2014 my good friend Peter Kellner approach me with a big idea – an idea that immediately caught my attention. He wanted to explore collaborating on a new conference idea that would highlight Angular and other “hot” Web development topics and wondered if I’d be interested in working with him and another friend of his named Kevin Nilson (who is also a good friend now) on a full-scale conference. I’ve been involved with chairing a lot of conference tracks over the years but never been the driving force behind organizing an entire conference. While the idea was definitely exciting it was also a little scary – at least initially.

    After talking more with Peter and Kevin I decided to jump in and we’ve been working hard to put on a top-notch conference called AngularU (short for “Angular University”) that will be held in San Francisco from June 22 – 25, 2015. I’m really excited about the conference and thought I’d discuss some of the key reasons in this post.

    Read more...

  • Creating a TypeScript Workflow with Gulp

    No Comments

    TypeScript provides a lot of great functionality that lets you leverage many of the features available in ES6 today but how do you get started using it in your favorite editor? If you’re using Visual Studio or WebStorm then TypeScript support can be used directly and everything happens magically without much work on your part. But, if you’re using Sublime Text, Brackets, Atom, or another editor you’ll have to find a plugin to compile .ts files to JavaScript or create your own custom workflow.

    While several plugins exist to compile TypeScript and even provide code help as you’re writing TypeScript code in different editors, I generally prefer to use my own custom workflow. There are multiple benefits associated with going with this approach including the ability to standardize and share tasks across team members as well as being able to tie the workflow into a custom build process used in continuous integration scenarios. In this post I’ll walk through the process of creating a custom TypeScript workflow using Gulp (a JavaScript task manager). It’s a workflow setup that my friend Andrew Connell and I created when we recently converted an application to TypeScript. Throughout the post you’ll learn how to setup a file named gulpfile.js to compile TypeScript to JavaScript and also see how you can “lint” your TypeScript code to make sure it’s as clean and tidy as possible.

    Getting Started Creating a Custom TypeScript Workflow

    I talked about using Gulp to automate the process of transpiling ES6 to ES5 in a previous post. The general process shown there is going to be used here as well although I’ll be providing additional details related to TypeScript. If you’re new to Gulp, it’s a JavaScript task manager that can be used to compile .ts files to .js files, lint your TypeScript, minify and concatenate scripts, and much more. You can find additional details at http://gulpjs.com.

    Here’s a step-by-step walk-through that shows how to get started creating a TypeScript workflow with Gulp. Although there are several steps to perform, it’s a one-time setup that can be re-used across projects. If you’d prefer to use a starter project rather than walking through the steps that are provided in this post then see the project at https://github.com/DanWahlin/AngularIn20TypeScript or download the project associated with the exact steps shown in this post here.

    Creating the Application Folders and Files

    1. Create a new folder where your project code will live. You can name it anything you’d like but I’ll call it typescriptDemo in this post.
    2. Create the following folders inside of typescriptDemo:
      • src
      • src/app
      • src/js

    3. Open a command-prompt in the root of the typescriptDemo folder and run the following npm command (you’ll need to have Node.js installed) to create a file named package.json.

      4. npm init
    4. Answer the questions that are asked. For this example you can go with all of the defaults it provides. After completing the wizard a new file named package.json will be added to the root of the folder.
    5. Create the following files in the typescriptDemo folder:
      • gulpfile.js
      • gulpfile.config.js
      • tslint.json


    Installing Gulp, Gulp Modules and TSDimage

    1. Now let’s get Gulp installed globally on your machine. Open a command-prompt and run the following command:

      2. npm install gulp –g
    2. Open package.json and add the following devDependencies property into it. The location of the property in the file doesn’t really matter but I normally put it at the bottom. A sample package.json file with the dependencies already in it can be found at https://github.com/DanWahlin/AngularIn20TypeScript.

      Note: The module versions shown here will certainly change over time. You can visit http://npmjs.org to find the latest version of a given module. 
      3. "devDependencies": { 
    "gulp": "^3.8.11", 
    "gulp-debug": "^2.0.1", 
    "gulp-inject": "^1.2.0", 
    "gulp-sourcemaps": "^1.5.1", 
    "gulp-tslint": "^1.4.4", 
    "gulp-typescript": "^2.5.0", 
    "gulp-rimraf": "^0.1.1" 
}

    3. Ensure that your command window path is at the root of the typescriptDemo folder and run the following command to install the dependencies:

      npm install

    4. The http://definitelytyped.org site provides a Node.js module named tsd that can be used to install TypeScript type definition files that are used to provide enhanced code help in various editors. Install the tsd module globally by running the following command:

      npm install tsd@next -g

    5. Run the following command:

      tsd init

    6. Open the tsd.json file that is generated in the root of typescriptDemo and change the following properties to include “tools” in the path as shown next:

      "path": "tools/typings",
      "bundle": "tools/typings/tsd.d.ts"

    7. Let’s use tsd to install a TypeScript definition file for Angular (an angular.d.ts file) and update the tsd.json file with the Angular file details as well. Run the following command:

      8. tsd install angular --save

      Note: You can install additional type definition files for other JavaScript libraries/frameworks by running the same command but changing the name from “angular” to the appropriate library/framework. See http://definitelytyped.org/tsd for a list of the type definition files that are available.

      Read more...

  • Adding Azure Active Directory and OWIN Code into an AngularJS/ASP.NET MVC Application to Handle User Authentication

    No Comments

    In a previous post I discussed how to setup the necessary configuration code and assemblies in an AngularJS/ASP.NET MVC application in order to authenticate users against Azure Active Directory (AAD). Once the initial configuration is complete you can write code to redirect users to the AAD login screen to retrieve an ID token.

    Read more...

  • Creating Custom AngularJS Directives Part 6 - Using Controllers

    No Comments

    Up to this point in the AngularJS directives series you’ve learned about many key aspects of directives but haven’t seen anything about how controllers fit into the picture. Although controllers are typically associated with routes and views, they can also be embedded in AngularJS directives. In fact, there are many scenarios where custom directives can take advantage of controllers to minimize code and simplify maintenance. While using controllers in directives is certainly optional, if you’d prefer to build directives using similar techniques that you use now to build views then you’ll find controllers are essential in many cases. By using controllers, directives start to feel like “child views”.

    Read more...

  • Registering a Custom AngularJS Application with Azure Active Directory

    No Comments

    If you’re working with Azure and need to add authentication and identity management into an application look no further than Azure Active Directory (AAD). AAD provides a robust set of services for single sign-on, authentication, multi-factor authentication, and more. Rather than setting up a custom authentication provider for an app, you can leverage existing functionality provided by AAD.

    Read more...

  • Building Applications with AngularJS, Azure Active Directory, and Office 365/SharePoint

    No Comments

    One of my favorite features of Single Page Applications (SPAs) is the ability to integrate data from nearly any backend technology and have it display on a variety devices (desktop browser, mobile, tablet, and more). Whether you’re calling a service like Firebase or Azure Mobile Services or hitting a custom REST API, the data that’s returned can be integrated into your SPA regardless of azurethe language, technology, or operating system being used on the server.

    Read more...

comments powered by Disqus