Problem
My views are not loading. I am using ngAnimate and ui.router. This is my first project with Angular and I am trying to lean.
First of my file structure
Next up ill post my main code
controllers/form.js
/**
* Created by ukcco1boa on 25/05/2017.
*/
// our controller for the form
// =============================================================================
console.log('test');
var submit = angular.module('formApp',
[
'ngAnimate',
'ui.router'
]);
submit.controller('formController', function ($scope) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.processForm = function () {
alert('awesome!');
};
});
// =============================================================================
// our controller for drop down select
var dropdown = angular.module(
'plunker',
[]
);
dropdown.controller('MainCtrl', function ($scope) {
$scope.user = {bankName: ''};
$scope.banks = [{
"name": "Bank A",
"branches": [{
"name": "Branch 1",
"code": "1"
}, {
"name": "Branch 2",
"code": "2"
}]
}, {
"name": "Bank B",
"branches": [{
"name": "Branch 3",
"code": "3"
}, {
"name": "Branch 4",
"code": "4"
}, {
"name": "Branch 5",
"code": "5"
}]
}];
});
app.js
angular
.module('formApp', [
'ngAnimate',
'ui.router'
]);
console.log('main')
config.js
angular
.module('formApp', [
'ngAnimate',
'ui.router'
])
// configuring our routes
// =============================================================================
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/signup)
.state('form.signup', {
url: '/signup',
templateUrl: 'views/form-signup.html'
})
// url will be /form/select
.state('form.select', {
url: '/select',
templateUrl: 'views/form-select.html'
})
// url will be /form/type
.state('form.type', {
url: '/type',
templateUrl: 'views/form-type.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/signup');
});
When I look at each individual page I don't seem to be inheriting any style or JavaScript.
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="../scripts/css/style.css">
<link rel="stylesheet" href="../scripts/css/override.css">
<!-- JS -->
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="app.js"></script>
<script src="config.js"></script>
<script src="controllers/form.js"></script>
</head>
<!-- apply our angular app -->
<body ng-app="formApp">
<div class="container">
<!-- views will be injected here -->
text
<div ui-view></div>
</div>
</body>
</html>
Related
I have a JSON the following JSON file:
[
{
"pageID": 1,
"pageName": "Home Page",
"pageHead": "Home Page Title"
},
{
"pageID": 2,
"pageName": "Second Page",
"pageHead": "2nd Page Title"
},
{
"pageID": 3,
"pageName": "Third Page",
"pageHead": "3rd Page Title"
}
]
What I am trying to do is display a page takes its title and header from the JSON file.
To do this, I have created the following JS code:
var dbApp = angular.module('dbApp', ['ngSanitize']);
dbApp.controller('dbCtrl', function($scope, $http){
$http.get('pageDB.json').success(function(data) {
$scope.pageContent = data;
$scope.pageHeadDB = data[0].pageHead;
$scope.pageBodyDB = data[0].pageBody;
});
});
In the JS code I am using $scope.pageHeadDB = data[0].pageHead; using specific index [1] but please don't worry about this, later I will make it dynamic.
The following view is supposed to display what I need:
<html ng-app="dbApp" ng-controller="dbCtrl">
<head>
<title>{{pageHeadDB}}</title>
</head>
<body>
<div ng-bind-html="pageBodyDB"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
</body>
</html>
The page displays the data when I use [0] which is the first item from the JSON file, but I don't understand why it doesn't work when I make the index [1] and/or [2]?
Any thoughts?
I can't test the <title> tag problem using this code snippet tool, but here's a solution simplifies some of your logic and works regardless of page number:
angular
.module('dbApp', ['ngSanitize'])
.controller('dbCtrl', dbCtrl);
dbCtrl.$inject = ['$window', '$scope', '$http'];
function dbCtrl($window, $scope, $http){
$scope.page = 0;
// stubbing ajax call for demo purposes
// $http.get('pageDB.json').success(function(data) {
var data = [
{
"pageID": 1,
"pageName": "Home Page",
"pageHead": "Home Page Title"
},
{
"pageID": 2,
"pageName": "Second Page",
"pageHead": "2nd Page Title"
},
{
"pageID": 3,
"pageName": "Third Page",
"pageHead": "3rd Page Title"
}
];
$scope.pageContent = data;
// });
}
<html ng-app="dbApp" ng-controller="dbCtrl">
<head>
<title>{{ pageContent[page].pageHead }}</title>
</head>
<body>
<h1>{{ pageContent[page].pageHead }}</h1>
<div ng-bind-html="pageContent[page].pageName"></div>
<hr/>
<label>Page:</label>
<input type="text" ng-model="page"></input>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
</body>
</html>
I'm learning AngularJS. So I'm going through the AngularJS tutorials on here - https://docs.angularjs.org/tutorial/step_07. While I'm in step 7 I'm facing syntax error while using angularjs $http service. This is my application directory structure and files.
app/
phone-list/phone-list.component.js
phone-list/phone-list.module.js
phone-list/phone-list.template.html
app.module.js
phonelist.php
phonelist.json
phone-list/phone-list.component.js
angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: function PhoneListController($http) {
var self = this;
self.orderProp = 'age';
$http.get('phonelist.json').then(function(response) {
console.log(response);
self.phones = response.data;
});
}
});
phone-list/phone-list.module.js
angular.module('phoneList', []);
phone-list/phone-list.template.html
<p>Search: <input ng-model="$ctrl.query" /></p>
<p>
<select data-ng-model="$ctrl.orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</p>
<ul>
<li data-ng-repeat="phone in $ctrl.phones | filter: $ctrl.query | orderBy: $ctrl.orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
app.module.js
angular.module('phoneCatApp', ['phoneList']);
phonelist.php
<!DOCTYPE html>
<html>
<head>
<title>AngularJS | Phone List</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="phone-list/phone-list.module.js"></script>
<script type="text/javascript" src="phone-list/phone-list.component.js"></script>
<script type="text/javascript" src="app.module.js"></script>
</head>
<body data-ng-app="phoneCatApp">
<phone-list></phone-list>
</body>
</html>
phonelist.json
[
{
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 2,
},
{
"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1,
},
{
"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 4
}
]
Issue I'm facing is below
You have extra , two place, which is leading to error in json parsing
"age": 2, //<--here
"age": 1, //<--here
You should remove the invalid , from JSON response & make sure all the properties & strings are wrap inside "(double quotes)
var foo = [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
},
{
"id": 4,
"name": "Test"
},
{
"id": 5,
"name": "Sample value"
},
{
"id": 6,
"name": "Testvalue"
}
];
I am trying to get a simple search input, which shows a couple of listings on ng-repeat. The search is basically a filter which shows searched items in that listing. What I have achieved is when I search something, with $http, it gets back the whole list of foo, and within that it filters. How can I just get the data with my keyword, and the whole JSON? For example if I search sample, how can I get the objects of id 3 and 5 so that I can display a new set of listings, or if I search with ID number 12, I get the object which has id as 12. The search term will be dynamic. I will be giving a $http call on every search as well.
Thanks.
If I understood well, it should work:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$scope.foo = [
{
"id":12,
"name":"Test"
},
{
"id":2,
"name":"Beispiel"
},
{
"id":3,
"name":"Sample"
},
{
"id":4,
"name":"Test"
},
{
"id":5,
"name":"Sample value"
},
{
"id":6,
"name":"Testvalue"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search" placeholder="Search">
<ul>
<li ng-repeat="item in foo | filter: search">
<span ng-bind-template="{{item.id}} - {{item.name}}"></span>
</li>
</ul>
</body>
</html>
Note: If you want to perform a $http request based on search input, look at this DEMO.
You can use $filter to achieve this.
function YourController($filter) {
var result = $filter('filter')(foo, {"id":3,"id":5});
};
You can iterate result later.
I am making attempts to style elements based off the attributes highlighted in my JSON file. I am currently using ng-styleto call properties within the JSON objects
ng-style="{color: colors.color }"
The example above doesn't seem to be doing in regards to targeting styling the nodes on my DOM
Does any know how to resolve this issue.
{
"colors": [
{
"color": "red",
"value": "#f00",
"message": "Simple message"
},
{
"color": "green",
"value": "#0f0",
"message": "Message with <strong>HTML</strong> tags"
},
{
"color": "blue",
"value": "#00f",
"message": "Am I going to work? I should not! <script>alert('Hello!');</script>"
}]
}
HTML
<ul class="block-elements">
<li ng-repeat="details in colors">
<button ng-click="popupBtn()" ng-style="{color: colors.color }">Click Me</button>
</li>
</ul>
CONTROLLER
"use strict";
var app = angular.module('nApp');
app.service("dataService", function ($http, $q){
var deferred = $q.defer();
$http.get('app/data/data.json').then(function (response){
deferred.resolve(response.data);
});
this.getcolors = function () {
return deferred.promise;
};
})
angular
.module('nApp')
.controller('dataCtrl', ['$scope', 'dataService', '$location', function($scope, dataService, $location) {
var promise = dataService.getcolors();
promise.then(function (data){
$scope.colors = data.colors;
});
Here's is a snippet working:
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.colors = [
{
"color":"red",
"value":"#f00",
"message":"Simple message"
},
{
"color":"green",
"value":"#0f0",
"message":"Message with <strong>HTML</strong> tags"
},
{
"color":"blue",
"value":"#00f",
"message":"Am I going to work? I should not!"
}
]
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<ul class="block-elements">
<li ng-repeat="details in colors">
<button ng-click="popupBtn()" ng-style="{ color: details.color }">Click Me</button>
</li>
</ul>
</body>
</html>
I want to have template site in AngularJs with /example/car/id where in different ids is a page for different cars .
In app.js i wrote :
angular
.module('carApp', [
'ngCookies',
'ngResource',
'ngRoute',
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/car/:id', {
templateUrl: 'views/car.html',
controller: 'CarCtrl'
})
});
In Json i made 2 cars:
[{
"model": "Audi",
"year": "1999"
}
{
"model": "BMW",
"year": "2005"
}]
In car.js
angular.module('carApp')
.controller('CarCtrl', ['$scope','$http', function($scope, $http)
{
$http.get('scripts/controllers/cars.json').success (function(data){
$scope.cars = data;
});
}]
);
Where and what code I need to write to have templates where in example/car/1 will show details about Audi and example/car/2 will show details about BMW ?
You can read the param using $routeParams and put them as a query string to your URL or use this version on $http :
$http({
url: user.details_path,
method: "GET",
params: {user_id: user.id}
});
https://stackoverflow.com/a/13760360/20126
Assuming you would have some sort of table or list displaying the car for the user to select you could have something like
<div ng-controller="carCtrl">
<ul ng-repeat = "car in cars">
<li> <a href ="#/cars/{{car.model}}> {{car.model}} </a></li>
</ul>
</div>
So this will create a list of cars that the user can select. On clicking on the link it will go to page on that model. (Note I am not using id here because you dont have id in you json)
I've changed the CarCrl to look like this :
angular.module('motoApp')
.controller('CarCtrl', ['$scope','$http', '$routeParams', function($scope, $http,
$routeParams) {
$http.get('scripts/controllers/cars.json').success (function(data){
$scope.car = data[$routeParams.id];
});
}]
);
And changed the JSON to dictionary :
{
"1": {
"model": "Audi",
"year": "2012",
"2": {
"model": "BMW",
"year": "2012",
}
}
and that is what i wanted to achive. Now in html i have :
<p>{{ car.model }}</p>
<p>{{ car.year }}</p>
and when i visit /car/1 it shows details about Audi and in /car/2 there is BMW