i am using angularjs ..
mainhtml.html
<!DOCTYPE html>
<html data-ng-app="demoapp">
<head>
<script src="scripts/angular.min.js"></script>
<title>Angular js</title>
</head>
<body> <div data-ng-controller="SimpleController">
<div data-ng-view=""></div>
<div class="ng-view"></div>
Name:<input type="text" data-ng-model="name" />{{name}}
<br />
<ul>
<li data-ng-repeat="cust in customers|filter:name|orderBy:'city'">{{cust.name|uppercase}}-{{cust.city|lowercase}}</li>
</ul>
<script>
var demoapp = angular.module('demoapp', []);
demoapp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'view1.html',
controller: 'SimpleController'
}).
when('/partial2', {
templateUrl: 'view2.html',
controller: 'SimpleController'
}).
otherwise({
redirectTo: '/'
});
}]);
demoapp.controller('SimpleController', function ($scope) {
$scope.customers = [{ name: 'aman', city: 'boom' },
{ name: 'ajay', city: 'reem dee' },
{ name: 'hood', city: 'meen' }
];
});
</script>
</div>
</body>
</html>
view1
<div class="container">
<h2>View1</h2>
Name:
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers|filter :filter.name|orderby"></li>
</ul>
<br />
Customer name:
<input type="text" data-ng-model="newCustomer.name"/>
<br />
<br />
Customer city:
<input type="text" data-ng-model="newCustomer.city"/>
<br />
<br />
<button data-ng-click="addCustomer()">Add customer</button>
<br />
View2
</div>
it works well before adding config($routeprovider) function,,,, routeprovider function is destroying the program... anyhelp to work it correctly
you probably
missed to include angular-route
<script data-require="angular-route#1.2.12" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular-route.js"></script>
next step is to add dependency to ngRoute module, as below
var demoapp = angular.module('demoapp', ['ngRoute']);
enjoy to live sample : http://plnkr.co/edit/sgQGz0JHjKk4CRcoZSUf?p=preview
btw: more info here
https://egghead.io/lessons/angularjs-routeprovider-api
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
official angular page
Related
I have started a new blank HTML, CSS and Bootstrap project in VS code and I have added FormValidation.io but for some reason its not evening firing up and all I have done is taken their main example, does anybody have an idea why, does this need to be apart of a framework (react, vue) or am I just missing something ? but when I click the submit button nothing happens
<html>
<head>
<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/plugins/formvalidation/dist/css/formValidation.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-6">
<form id="loginForm" method="POST">
<div class="form-group">
<label>Username</label>
<input class="form-control" type="text" name="username" />
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" name="password" />
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>
<script src="/plugins/jquery.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/plugins/formvalidation/dist/js/FormValidation.full.min.js"></script>
<script src="/plugins/formvalidation/dist/js/plugins/Bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('loginForm'),
{
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long',
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The username can only consist of alphabetical, number and underscore',
},
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
stringLength: {
min: 8,
message: 'The password must have at least 8 characters',
},
}
},
},
plugins: {
bootstrap: new FormValidation.plugins.Bootstrap(),
},
}
);
});
</script>
</body>
Here is a small piece of code, where I am trying to render an HTML of my choice based on the "type" key of the json. Unfortunaltely, I don't see any error on executing the code nor am I getting the required HTML.
I am very new to Angular
<html>
<head>
<title></title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.GenerateTable = function () {
$scope.Customers = [
{type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
{type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
{type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<div ng-repeat="m in customers">
<div ng-switch="m.type">
<div ng-switch-when="text">
<h1>Hello</h1>
<p>Hello World.</p>
</div>
</div>
</div>
</div>
</body>
</html>
I hope it will help you.
<html>
<head>
<title></title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.GenerateTable = function () {
$scope.Customers = [
{type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
{type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
{type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<div ng-repeat="m in Customers">
<div><input type="{{m.type}}" value="{{m.Name}}" placeholder="{{m.placeholder}}" required="{{m.required}}" /></div>
</div>
</div>
</body>
</html>
Unable to focus on textbox on button click:
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
//Here How to focus my textbox
}
};
});
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
document.getElementById("UserName").focus();
}
};
});
You can use angular.element to select your input box and can call focus(). Try something similar to below::
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username"/>
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.focusText =false;
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
angular.element("#UserName").focus();
}
};
});
So im following thinkster.io for an Angular guide and I got stuck on the routing part, specifically, the templating and ui viewing. Heres my code, the problem is, nothing seems to show up anymore :/
var app = angular.module('flapperNews', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home')
}]);
app.factory('posts', [function(){
var o = {
posts: [
{title: 'post 1', upvotes: 5},
{title: 'post 2', upvotes: 2},
{title: 'post 3', upvotes: 15},
{title: 'post 4', upvotes: 9},
{title: 'post 5', upvotes: 4}
]
};
return o;
}]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({title: $scope.title,
upvotes: 0,
link: $scope.link});
$scope.title = "";
$scope.link="";
};
$scope.increaseVotes = function(post) {
post.upvotes += 1;
};
}]);
html>
<head>
<meta charset="UTF-8">
<title>My Angular App!</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<!--template start-->
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div data-ng-repeat="post in posts | orderBy: '-upvotes'">
<span ng-click="increaseVotes(post)"><img src="lol.jpeg"></span>
<a ng-show="post.link" href="https://{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
- upvotes: {{post.upvotes}}
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
I cant exactly understand whats wrong with it, in my mind ui-view should be rendering the template, yet for some strange reason, it is not. I tried looking in other questions and it seems that doesnt work either.
I try to remove hastag from url in my website, but i don't know exactly how..
i researched on the internet, and i find it's neccesary to insert a location providers in my controller, but...where?
Here si my controller code:
'use strict';
(function() {
var app = angular.module('store', ['store-products']);
app.controller('StoreController', ['$log', function($log) {
this.products = gems;
$log.info('Dependency Info');
}]);
app.controller('PanelController', function() {
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
app.controller('ReviewController', function() {
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
this.review = {};
};
});
var gems = [
{
name: 'Dodecahedron',
price: 2.95,
description: 'Dodecahedron description...',
images: [
{
full: 'http://courseware.codeschool.com.s3.amazonaws.com/shaping-up-with-angular-js/images/gem-01.gif'
}
],
canPurchase: true,
soldOut: false,
reviews: [
{
stars: 5,
body: 'Awesome website',
author: 'user1#schimbatot'
},
{
stars: 4,
body: 'Good!',
author: 'user2#schimbatot'
}
]
},
];
})();
And module code:
(function() {
var app = angular.module('store-products', []);
app.directive('productTitle', function () {
return {
restrict: 'E',
templateUrl: 'product-title.html'
};
});
})();
Also, find it's neccesary to add <base href="/"> in my index.
But, where it's neccesary to insert the $locationProvider command? ( $locationProvider.html5Mode(true);)
EDIT, here is my index from page:
<!doctype html>
<html ng-app="store">
<head>
<title>AngularJS App</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="application.css" />
<script src="app.js"></script>
<base href="/">
</head>
<body>
<h1>AngularJS App</h1>
<div class="container" ng-controller="StoreController as store">
<h1>AngularJS App</h1>
<div ng-repeat="product in store.products">
<h3>
<product-title></product-title>
</h3>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{active:panel.isSelected(3)}">Reviews</li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Description</h4>
<blockquote>Product description...</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h4>Specifications</h4>
<blockquote>None yet</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h4>Reviews</h4>
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
<blockquote>
<b>Stars: {{reviewCtrl.review.stars}}</b>
{{reviewCtrl.review.body}}
<cite>by: {{reviewCtrl.review.author}}</cite>
</blockquote>
<select ng-model="reviewCtrl.review.stars" required>
<option value="1">1 star</option>
<option value="2">2 star</option>
<option value="3">3 star</option>
<option value="4">4 star</option>
<option value="5">5 star</option>
</select>
<textarea ng-model="reviewCtrl.review.body" required></textarea>
<label>by:</label>
<input ng-model="reviewCtrl.review.author" type="email" required />
<input class="btn" type="submit" value="Submit" />
</form>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
<script src="products.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>
Thank for help me!
You need to specify the html5 mode in the config like in below
var app = angular.module('store', ['store-products'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Read more about hashbang mode and html5 mode
[here] (https://docs.angularjs.org/guide/$location)