var app = angular.module['plunker', []];
app.controller['MainCtrl', function[$scope, $compile] {
}];
app.directive['pageContents', function[$compile]{
return {
link: function[scope, element, attrs]{
var html = 'About Us Contact';
var matches = html.match[/href="[.+?]"/g];
matches.forEach[function[href]{
var url = href.match[/href="[.+?]"/][1]
html = html.replace[href, 'ng-click="loadPage[\''+url+'\']"']
}];
var pageEl = $compile[html][scope];
element.append[pageEl];
scope.loadPage = function[url]{
scope.clicked = 'clicked ' +url;
};
}
};
}];
AngularJS Plunker
{{clicked}}
/* Put your css in here */
Từng bước để chuyển đổi Mẫu HTML sang mẫu Angular 7
Tháng Tám 4, 2019
Dịch giả tự do
mã hóa
Tải xuống bất kỳ tệp html nào để chuyển đổi thành góc chẳng hạn, bạn có thể tải xuống mẫu này, nhấp vào đây để tải xuống
Tạo một ứng dụng góc bằng CLI góc
ng mẫu góc mới
sao chép tất cả các tệp và thư mục và dán nó vào thư mục src> tài sản mong đợi tệp HTML
Sau đó bao gồm tất cả các tệp css của bạn vào góc. tệp json như thế này. -
“phong cách”. [
“src/phong cách. css”,
“src/nội dung/css/tùy chỉnh. css”,
“src/nội dung/nhà cung cấp/bootstrap/css/bootstrap. tối thiểu. css”,
“src/nội dung/nhà cung cấp/phông chữ tuyệt vời/css/phông chữ tuyệt vời. tối thiểu. css”,
“src/nội dung/css/phông chữ. css”,
“src/assets/css/grasp_mobile_progress_circle-1. 0. 0. tối thiểu. css”,
“src/tài sản/nhà cung cấp/malihu-custom-scrollbar-plugin/jquery. mCustomScrollbar. css”,
“src/nội dung/css/kiểu. mặc định. css”
],
Sau đó đưa tệp Js của bạn vào góc. json như thế này
"kịch bản". [
“src/tài sản/nhà cung cấp/jquery/jquery. tối thiểu. js”,
“src/tài sản/nhà cung cấp/popper. js/umd/popper. tối thiểu. js”,
“src/nội dung/nhà cung cấp/bootstrap/js/bootstrap. tối thiểu. js”,
“src/assets/js/grasp_mobile_progress_circle-1. 0. 0. tối thiểu. js”,
“src/tài sản/nhà cung cấp/jquery. cookie/jquery. bánh quy. js”,
“src/tài sản/nhà cung cấp/biểu đồ. js/Biểu đồ. tối thiểu. js”,
“src/nội dung/nhà cung cấp/jquery-xác thực/jquery. xác thực. tối thiểu. js”,
“src/tài sản/nhà cung cấp/malihu-custom-scrollbar-plugin/jquery. mCustomScrollbar. concat. tối thiểu. js”,
“src/assets/js/charts-home. js”,
“src/nội dung/js/phía trước. js”
]
Bây giờ là lúc để tạo các thành phần cho tất cả các tệp html trước tiên chúng ta sẽ tạo bố cục như thế này. Chạy lệnh bên dưới được liệt kê Ví dụ–
Tạo thành phần tiêu đề bằng Angular CLI
ng tạo thành phần thành phần/bố cục/tiêu đề
Sau đó tạo thành phần sidemenu bằng CLI góc
ng g component thành phần/bố cục/sidemenu
Sau đó tạo thành phần sidemenu bằng CLI góc
ng g thành phần thành phần/bố cục/chân trang
Bây giờ chúng ta có thể tạo thành phần trang web bằng CLI góc
Tạo các thành phần của tất cả các tệp html mà bạn có trong mẫu html như ví dụ này
ng g thành phần thành phần/trang web/nhà
ng g component thành phần/trang web/biểu đồ
ng g component thành phần/trang web/biểu mẫu
ng g thành phần thành phần/trang web/đăng nhập
ng g thành phần thành phần/trang web/đăng ký
ng g component thành phần/trang web/bảng
Bây giờ, hãy chuyển sang cấu trúc thư mục của dự án, bạn có thể thấy rằng trong hai thư mục, hãy tìm trong src > app > layout
> trang web
Mở thư mục bố cục từ ứng dụng và
Dán mã tiêu đề vào tiêu đề. thành phần. html
dán mã sidemenu vào sidemenu. thành phần. html
dán mã chân trang vào chân trang. thành phần. html
Bây giờ hãy dán nội dung chính của các trang html vào thư mục trang web bên dưới các trang tương ứng
Sau khi bạn hoàn thành tất cả các bước trên, bây giờ chuyển sang định tuyến góc
Bây giờ hãy viết định tuyến cho trang web tương ứng trong ứng dụng. mô-đun. tệp ts
nhập { BrowserModule } từ '@angular/platform-browser';
nhập { NgModule } từ '@angular/core';
nhập {AppComponent} từ ‘. /ứng dụng. thành phần';
nhập { HeaderComponent } từ '. / thành phần/bố cục/tiêu đề/tiêu đề. thành phần';
nhập {SidemenuComponent} từ '. /thành phần/bố cục/sidemenu/sidemenu. thành phần';
nhập { FooterComponent } từ ‘. /thành phần/bố cục/chân trang/chân trang. thành phần';
nhập {HomeComponent} từ '. /thành phần/trang web/nhà/nhà. thành phần';
nhập { ChartsComponent } từ '. /thành phần/trang web/biểu đồ/biểu đồ. thành phần';
nhập { FormsComponent } từ ‘. /thành phần/trang web/biểu mẫu/biểu mẫu. thành phần';
nhập { LoginComponent } từ ‘. / thành phần/trang web/đăng nhập/đăng nhập. thành phần';
nhập { RegisterComponent } từ ‘. / thành phần/trang web/đăng ký/đăng ký. thành phần';
nhập { TablesComponent } từ '. / thành phần/trang web/bảng/bảng. thành phần';
nhập {RouterModule, Routes} từ '@angular/router';
nhập { registerContentQuery } từ '@angular/core/src/render3/instructions';
const appRoutes. Tuyến đường = [
{ con đường. 'đăng nhập', thành phần. Thành phần đăng nhập },
{ con đường. 'nhà', thành phần. HomeComponent},
{ con đường. 'đăng ký', thành phần. Đăng ký thành phần},
{ con đường. 'biểu đồ', thành phần. ChartsComponent},
{ con đường. 'hình thức', thành phần. FormsComponent},
{ con đường. 'bảng', thành phần. TableComponent},
{ con đường. ”,
chuyển hướng tới. '/trang chủ',
đường dẫnMatch. 'đầy'
}
];
@NgModule[{
tuyên bố. [
Thành phần ứng dụng,
Thành phần tiêu đề,
SidemenuThành phần,
Thành phần chân trang,
Trang chủThành phần,
Biểu đồThành phần,
FormsComponent,
Thành phần đăng nhập,
đăng ký thành phần,
BảngThành phần
],
nhập khẩu. [
Mô-đun trình duyệt,
Mô-đun bộ định tuyến. forRoot[appRoutes]
],
nhà cung cấp. [],
khởi động. [Thành phần ứng dụng]
}]
lớp xuất AppModule { }
Bây giờ bạn đã sẵn sàng để đi đến bước cuối cùng
Giờ hãy dán mã bên dưới vào ứng dụng. thành phần. html
Bây giờ bạn đã hoàn tất việc gõ ng-serve để chạy ứng dụng này
tiếng riu ríu
ghim nó
Thẻ. Hướng dẫn góc 7 , định tuyến góc , angular7, Convert Html Admin themes to angular7, Convert HTML to Angular Step by step, convert to angular 8, HTML to Angular 7,