javascript

  • Actually there is another (maybe better solution) where you can use the angular’s native ‘filter’ filter and still pass arguments to your custom filter.
  • Consider the following code:

    To make this work you just define your filter as the following:

    As you can see here, weDontLike actually returns another function which has your parameter in its scope as well as the original item coming from the filter.

  • It took me 2 days to realise you can do this, haven’t seen this solution anywhere yet.
  • Checkout Reverse polarity of an angular.js filter to see how you can use this for other useful operations with filter.

Actually there is another (maybe better solution) where you can use the angular’s native ‘filter’ filter and still pass arguments to your custom filter.
Continue reading “javascript”

javascript

  • $broadcast will channel down to all the children dom elements and $emit will channel the opposite direction to all the ancestor dom elements.
  • The best way to avoid deciding between $emit or $broadcast is to channel from the $rootScope and use $broadcast to all its children.
  • Note we added $rootScope and now we’re using $broadcast(broadcastName, arguments).
  • In our second controller, we need to set up code to listen to our broadcast

    It’s really that simple.

  • Lastly, keep in mind a really useful broadcast to listen to is ‘$destroy’ again you can see the $ means it’s a method or object created by the vendor codes.

One thing you should know is $ prefix refers to an Angular Method, $$ prefixes refers to angular methods that you should avoid using.
Continue reading “javascript”

Getting started with Angularjs and webapi

  • _service = service;
    }

    // GET: api/Product
    public IEnumerableProduct Get()
    {

    var products = _service.GetAllProducts();
    return products;
    }

     

    ShoppingService

    public class ShoppingService: IShoppingService
    {
    private readonly IRepositoryCategory _categoryRepository;
    private readonly IRepositoryProduct _productRepository;
    private readonly IRepositoryImage _imageRepository;
    public categoryRepository,
    IRepositoryProduct productRepository, IRepositoryImage imageRepository)
    {
    this.

  • _imageRepository = imageRepository;

    }

    public ListProduct GetAllProducts()
    {
    return _productRepository.GetAll();
    }

    public ListCategory GetAllCategories()
    {
    return _categoryRepository.GetAll();
    }

    ProductRepository

    public class ProductRepository : IRepositoryProduct
    {
    private readonly DataContext _dbContext;

    public ProductRepository(DataContext dbContext)
    {
    _dbContext = dbContext;
    }
    public ListProduct GetAll()
    {
    return _dbContext.Products.ToList();
    }

     

    Since we use sqlcompact file to store our data, we need to install sql compact package from nuget, point the sql connection to add name=”DefaultConnection” connectionString=”Data Source =|DataDirectory|Tourism.sdf” /

    Then install sql compact package from nuget, point the sql connection to add name=”DefaultConnection” connectionString=”Data Source =|DataDirectory|Tourism.sdf” /

    Now we just finished writing web api to retrieve data from sql compact file.

  • If the web api is working as expected, I now start creating the single page app, install angularjs App = angular.module(‘App’, [‘ngRoute’]);

    // configure our routes
    App.config(function ($routeProvider) {
    $routeProvider

    // route for the home page
    .

  • index.html

    body ng-app=”App”
    div class=”navbar navbar-inverse navbar-fixed-top”
    div class=”container”
    div class=”navbar-header”
    button type=”button” class=”navbar-toggle” data-toggle=”collapse” span class=”icon-bar”/span
    span class=”icon-bar”/span
    span class=”icon-bar”/span
    /button
    a href=”#/” title=”SPA – TechFunda” class=”navbar-brand”SPA/a
    /div
    div class=”navbar-collapse collapse”
    ul class=”nav navbar-nav”
    li class=”active”a href=”#/”Home/a/li
    lia href=”#/PD”Personal Details/a/li
    lia href=”#/about”About us/a/li
    lia href=”#/contact”Contact us/a/li
    /ul
    /div
    /div
    /div
    div class=”container body-content”

    div id=”divLoading” ng-show=”loading” style=”font-size:50px;”
    div class=”loading”
    Loading …..
    /div
    /div
    div ng-view/div
    hr /

    /div
    /body

    The ng-app value needs to be same as the what is defined in the js.

  • Url}}” style=”height:250px;” alt=””

    div class=”caption price-color”
    h4 h4
    {{item.Name}}
    /h4
    /div
    div class=”caption description-color”
    p{{item.Description}}/p
    /div
    div class=”caption description-color”

    /div
    /div
    /a
    /div
    /div

    Each child view has its own controller, and it is responsible for retrieving and rendering the data in the view.

; Author: honzha99; Updated: 19 Feb 2017; Section: ASP.NET; Chapter: Web Development; Updated: 19 Feb 2017
Continue reading “Getting started with Angularjs and webapi”

javascript

  • My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application.
  • Here is an example of what’s in my app:

    In circle 2, the template that is loaded into the has an additional sub-navigation.

  • I know that I can include additional templates within the 1st template, but these templates are all going to be pretty complex.
  • I would like to keep all the templates separate in order to make the application easier to update and not have a dependency on the parent template having to be loaded in order to access its children.
  • There is the potential that the sub-navigation templates will have a 2nd sub-navigation that will need to load its own templates as well into the area in circle 4

    How does one go about structuring an AngularJS app to deal with such complex nesting of templates while keeping them all separate from one another?

My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application.
Continue reading “javascript”

Using multiple dependencies in an Angular.js application

  • Here’s the deal : we have a website which contains lots of pictures, and we want to “visualize” some data.
  • The way to go is using ZingChart (my favorite charting library) and a lazy loader (ing-src-ondemand) with our Angular.js app.The lazy loader will display (load) each picture only when they appear on the screen, via a scroll event.Those two features will add custom directives that can be used with our HTML template to bind the data from the controller (“ZingChart” will use a JSON file, and the lazy loader will take care of the pictures located in a $scope array).
  • To do this, we need to we download the libraries, available online we have them available on local (well, working with local files is, imho, better than depending on the CDN…), we have to load them from the HTML template :script we have to add those dependencies to our app.js file, which can be external, or attached just before the /body tag [‘zingchart-angularjs’, that’s it !
  • But I warn you : do not forget to load the libraries, or your app will not work at all, as the needed dependencies will be missing.

Continue reading “Using multiple dependencies in an Angular.js application”

Full Stack Web Development

Full Stack Web Development from The Hong Kong University of Science and Technology. Learn front-end and mobile hybrid development, build back-end …
Continue reading “Full Stack Web Development”

Spring REST API + OAuth2 + AngularJS

  • When the client application needs to acquire an Access Token, it will do so after a simple form-login driven auth process:

    A quick note here is that the form login configuration isn’t necessary for the Password flow – only for the Implicit flow – so you may be able to skip it depending on what OAuth2 flow you’re using.

  • Next, we will configure our TokenStore to access the same database that authorization server uses to store access tokens:

    Note that, for this simple implementation, we’re sharing the SQL backed token store even though the Authorization and Resource servers are separate applications.

  • Let’s start with the two simple pages – “index” and “login”; once a user provides their credentials, the front-end JS client uses them to acquire an Access Token from Authorization Server.
  • Here is our simple index page:

    As we will need to authorize our requests to the resource using our access token, we will append a simple authorization header with access token:

    If no cookie is found, the user will be redirected to login page.

  • Our client application is a separate module that tries to access resources server after obtaining an access token from authorization server using implicit grant flow.

Learn how to set up OAuth2 for a Spring REST API and how to consume that from an AngularJS client.
Continue reading “Spring REST API + OAuth2 + AngularJS”